我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
不能在JSX中直接使用任何循环或其他额外方法。相反，您可以做的是为其生成单独的函数，并生成循环语句，然后在该函数中返回组件上述代码示例：
function renderObjectRow (){
for (var i=0; i < numrows; i++) {
return <ObjectRow/>
}
}
<tbody>
{renderObjectRow()}
</tbody>
其他回答
你当然可以按照另一个答案的建议用.map来解决。如果您已经使用了Babel，可以考虑使用jsx控制语句。
它们需要一些设置，但我认为在可读性方面是值得的（特别是对于非React开发人员）。如果使用linter，还有eslint-plugin-jsx控制语句。
如果没有键值par，则使用以下代码打印数组值-
<div>
{my_arr.map(item => <div>{item} </div> )}
</div>
好了，给你。
{
[1, 2, 3, 4, 5, 6].map((value, index) => {
return <div key={index}>{value}</div>
})
}
您所要做的只是映射数组并返回任何要渲染的内容。请不要忘记在返回的元素中使用key。
您可以创建如下新组件：
将键和数据传递给ObjectRow组件，如下所示：
export const ObjectRow = ({key,data}) => {
return (
<div>
...
</div>
);
}
创建新组件ObjectRowList，使其充当数据的容器：
export const ObjectRowList = (objectRows) => {
return (
<tbody>
{objectRows.map((row, index) => (
<ObjectRow key={index} data={row} />
))}
</tbody>
);
}
您可以执行以下操作来重复组件numrows次
<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>
