如何在React中的JSX中编写for循环？

Question

我想编写一个简单的程序，使用for循环打印从0到10的数字。我尝试使用for循环，在子组件中传递属性并打印从0到10的数字。这是我的代码：

import React, { Component } from 'react';
class App extends Component {



  render() {

    return(
      <div>
        <p>
        {
          for(var i=0;i<11;i++)
          {
            // var data=i;
            <Print value={i}/>
          }
        }
       </p>
      </div>
    );
  }
}

const Print=(props)=>{
  return(
    <div>
      {props.value}
    </div>
  );
}

export default App;

- user11066242

Answer 1

你可以将JSX推入数组并渲染它。

class App extends React.Component {
  render() {
    const result = [];

    for (var i = 0; i < 11; i++) {
      result.push(<Print value={i} key={i} />);
    }

    return <div>{result}</div>;
  }
}

const Print = props => {
  return <div>{props.value}</div>;
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

- Tholle

---

但是，当我向打印组件添加新字段（例如按钮）时，每个数组项的所有内容都会显示出来。我的意思是，对于数组的每个值，都会显示一个项目。 - user11066242

@user11066242 是的，在循环的每次迭代中都创建了一个名为 Print 的组件。如果你向 Print 组件添加了一些内容，它们全部都将得到这个改变。如果你只想要一次，可以将其添加到 App 组件中。 - Tholle