我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
在React中使用map是迭代数组的最佳实践。
为了防止ES6出现一些错误，React中使用了如下语法映射：
<tbody>
{items.map((item, index) => <ObjectRow key={index} name={item.name} />)}
</tbody>
在这里，您调用一个组件＜ObjectRow/＞，因此不需要在箭头后面加括号。
但你也可以这样做：
{items.map((item, index) => (
<ObjectRow key={index} name={item.name} />
))}
Or:
{items.map((item, index) => {
// Here you can log 'item'
return (
<ObjectRow key={index} name={item.name} />
)
})}
我这么说是因为如果在箭头后面加上括号“｛｝”，React将不会抛出错误，并显示白名单。
其他回答
这是我迄今为止在大多数项目中使用的方法：
const length = 5;
...
<tbody>
{Array.from({ length }).map((_,i) => (
<ObjectRow key={i}/>
))}
</tbody>
如果numrows是一个数组，那么最好的方法就是map方法。如果不是，并且您只能从JSX访问它，您也可以使用以下ES6方法：
<tbody>
{
[...Array(numrows).fill(0)].map((value,index)=><ObjectRow key={index} />)
}
</tbody>
只需执行以下操作：
<tbody>｛new Array（numRows）.fill（“”，0，numRows”）.map（（p，i）=>＜YourRaw key＝｛i｝/>）｝</tbody>
您可以在React for循环中使用.map（）。
<tbody>
{ newArray.map(() => <ObjectRow />) }
</tbody>
有趣的是，人们如何使用更新的语法或不常见的方法来创建数组，从而给出“创造性”的答案。在我使用JSX的经验中，我见过这些技巧，只有经验不足的React程序员才会使用。
解决方案越简单，对未来的维护人员就越好。由于React是一个web框架，通常这种类型的（表）数据来自API。因此，最简单和最实用的方法是：
const tableRows = [
{id: 1, title: 'row1'},
{id: 2, title: 'row2'},
{id: 3, title: 'row3'}
]; // Data from the API (domain-driven names would be better of course)
...
return (
tableRows.map(row => <ObjectRow key={row.id} {...row} />)
);
