我使用这个：

gridItems = this.state.applications.map(app =>
          <ApplicationItem key={app.Id} app={app } />
);

PS：千万不要忘记钥匙，否则会有很多警告！

当我想添加一定数量的组件时，我使用助手函数。

定义一个返回JSX的函数：

const myExample = () => {
    let myArray = []
    for(let i = 0; i<5;i++) {
        myArray.push(<MyComponent/>)
    }
    return myArray
}

//... in JSX

<tbody>
    {myExample()}
</tbody>

return (
    <table>
       <tbody>
          {
            numrows.map((item, index) => {
              <ObjectRow data={item} key={index}>
            })
          }
       </tbody>
    </table>
);

我不确定这是否适用于您的情况，但通常[map][1]是一个很好的答案。

如果这是使用for循环的代码：

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    }
</tbody>

你可以用map函数这样写：

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

objects.map是进行循环的最佳方式，objects.filter是过滤所需数据的最佳方式。过滤后的数据将形成一个新的数组和对象。some是检查数组是否满足给定条件的最佳方法（它返回布尔值）。

如果在JSX中需要JavaScript代码，可以添加｛｝，然后在这些括号中编写JavaScript代码。就这么简单。

同样，您可以在JSX/react中循环。

Say:

<tbody>
    {`your piece of code in JavaScript` }
</tbody>

例子：

<tbody>
    { items.map((item, index) => {
        console.log(item)}) ; // Print item
        return <span>{index}</span>;
    } // Looping using map()
</tbody>

JSX内部有多种循环方式

使用for循环函数TableBodyForLoop（props）{常量行=[]；//创建数组以存储tr列表for（设i=0；i<props.people.length；i++）{const person=道具.人物[i]；//将tr推到数组，关键是行.推(<tr key={person.id}><td>｛person.id｝</td><td>｛人名｝</td></tr>);}//返回tbody内的行return<tbody>｛rows｝</tbody>；}使用ES6阵列映射方法函数TableBody（props）{返回(<tbody>{props.people.map（person=>(<tr key={person.id}><td>｛person.id｝</td><td>｛人名｝</td></tr>))}</tbody>);}

完整示例：https://codesandbox.io/s/cocky-meitner-yztif

以下React文档将有所帮助

列表和键条件渲染