React元素是简单的JavaScript，因此您可以遵循JavaScript的规则。您可以在JavaScript中使用for循环，如下所示：-

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

但有效且最好的方法是使用.map函数。如下所示：-

<tbody>
    {listObject.map(function(listObject, i){
        return <ObjectRow key={i} />;
    })}
</tbody>

在这里，有一件事是必要的：定义密钥。否则，它将发出如下警告：-

Warning.js:36警告：数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。检查ComponentName的渲染方法。看见“链接”了解更多信息。

如果您真的想在JSX中使用for循环，可以使用IIFE。

<tbody>
  {
    (function () {
      const view = [];
      for (let i = 0; i < numrows; i++) {
        view.push(<ObjectRow key={i}/>);
      }
      return view;
    }())
  }
</tbody>

在迭代数组和生成JSX元素方面有很多解决方案。所有这些都很好，但都直接在循环中使用了索引。我们建议使用数据中的唯一id作为键，但如果数组中的每个对象没有唯一id，我们将使用索引作为键，但是不建议直接使用索引作为密钥。

还有一件事，为什么我们选择.map，但为什么不选择foEach，因为.map返回一个新数组。现在有很多不同的方法。

下面使用.map的不同版本详细说明了如何使用唯一键以及如何使用.map循环JSX元素。

当从数据中返回单个JSX元素和唯一id作为密钥版本时，.map不返回：

const {objects} = this.state;

<tbody>
    {objects.map(object => <ObjectRow obj={object} key={object.id} />)}
</tbody>

将数据中的多个JSX元素和唯一id作为密钥版本返回时，不返回.map

const {objects} = this.state;

<tbody>
    {objects.map(object => (
        <div key={object.id}>
            <ObjectRow obj={object} />
        </div>
    ))}
</tbody>

当将单个JSX元素和索引作为键版本返回时，.map没有返回：

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => <ObjectRow obj={object} key={`Key${index}`} />)}
</tbody>

当返回多个JSX元素和索引作为密钥版本时，.map没有返回：

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => (
        <div key={`Key${index}`}>
            <ObjectRow obj={object} />
        </div>
    ))}
</tbody>

.map，当返回多个JSX元素和索引作为键版本时返回：

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => {
        return (
            <div key={`Key${index}`}>
                <ObjectRow obj={object} />
            </div>
        )
    })}
</tbody>

将数据中的多个JSX元素和唯一id作为密钥版本返回时，使用return的.map：

const {objects} = this.state;

<tbody>
    {objects.map(object => {
        return (
            <div key={object.id}>
                <ObjectRow obj={object} />
            </div>
        )
    })}
</tbody>

另一种方式是

render() {
  const {objects} = this.state;
  const objectItems = objects.map(object => {
       return (
           <div key={object.id}>
               <ObjectRow obj={object} />
           </div>
       )
  })
  return(
      <div>
          <tbody>
              {objectItems}
          </tbody>
      </div>
   )
}

只需使用.map（）循环遍历集合，并从每个迭代返回带有道具的＜ObjectRow＞项。

假设对象是某处的数组。。。

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>

使用映射到循环

 Array.map(arrayItem => {
return <ObjectRow arrayItem={arrayItem}/> // pass array item in component
})

问题是您没有返回任何JSX元素。对于这种情况还有另一种解决方案，但我将提供最简单的解决方案：“使用map函数”！

<tbody>
  { numrows.map(item => <ObjectRow key={item.uniqueField} />) }
</tbody>

它是如此简单和美丽，不是吗？