我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
在渲染或任何函数中，在返回之前，可以使用变量来存储JSX元素。就像这样-
const tbodyContent = [];
for (let i=0; i < numrows; i++) {
tbodyContent.push(<ObjectRow/>);
}
在身体内部使用它，如下所示：
<tbody>
{
tbodyContent
}
</tbody>
但我更喜欢map（）而不是这个。
其他回答
不能在JSX中直接使用任何循环或其他额外方法。相反，您可以做的是为其生成单独的函数，并生成循环语句，然后在该函数中返回组件上述代码示例：
function renderObjectRow (){
for (var i=0; i < numrows; i++) {
return <ObjectRow/>
}
}
<tbody>
{renderObjectRow()}
</tbody>
假设您所在的州有一系列项目：
[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]
<tbody>
{this.state.items.map((item) => {
<ObjectRow key={item.id} name={item.name} />
})}
</tbody>
要循环多次并返回，可以通过from和map实现：
<tbody>
{
Array.from(Array(i)).map(() => <ObjectRow />)
}
</tbody>
其中i=次数
如果您想为渲染组件分配唯一的键ID，可以使用React文档中建议的React.Children.toArray
对阵列进行反应
将子级不透明数据结构作为平面数组返回，并为每个子级分配键。如果要在渲染方法中处理子对象的集合，特别是如果要在传递之前对this.props.children进行重新排序或切片，则非常有用。
注：React.Children.toArray（）在展平子列表时更改键以保留嵌套数组的语义。也就是说，toArray在返回的数组中给每个键加前缀，以便每个元素的键都被限定到包含它的输入数组中。
<tbody>
{
React.Children.toArray(
Array.from(Array(i)).map(() => <ObjectRow />)
)
}
</tbody>
您可以执行以下操作来重复组件numrows次
<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>
只需使用带有ES6语法的map Array方法：
<tbody>
{items.map(item => <ObjectRow key={item.id} name={item.name} />)}
</tbody>
不要忘记密钥属性。
