如何在 React 的 JSX 中编写 for 循环？ [复制]答案

【问题标题】：How to write for loop in JSX in React? [duplicate]如何在 React 的 JSX 中编写 for 循环？ [复制]
【发布时间】：2019-07-16 07:33:47
【问题描述】：

我想编写一个简单的程序，使用 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;

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案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>

【讨论】：

但是当我将新字段（如按钮）添加到 Print 组件中时，数组中的每个项目都会显示所有内容。我的意思是对于数组的每个值，都会显示一个项目。
@user11066242 是的，您在循环的每次迭代中都创建了一个Print 组件。如果你向Print 组件添加一些东西，它们都会得到那个改变。如果您只想要一次，则可以将其添加到 App 组件中。