我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
你当然可以按照另一个答案的建议用.map来解决。如果您已经使用了Babel，可以考虑使用jsx控制语句。
它们需要一些设置，但我认为在可读性方面是值得的（特别是对于非React开发人员）。如果使用linter，还有eslint-plugin-jsx控制语句。
其他回答
你当然可以按照另一个答案的建议用.map来解决。如果您已经使用了Babel，可以考虑使用jsx控制语句。
它们需要一些设置，但我认为在可读性方面是值得的（特别是对于非React开发人员）。如果使用linter，还有eslint-plugin-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将不会抛出错误，并显示白名单。
我不确定这是否适用于您的情况，但通常地图是一个很好的答案。
如果这是使用for循环的代码：
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
你可以用地图这样写：
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6语法：
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
return (
<table>
<tbody>
{
numrows.map((item, index) => {
<ObjectRow data={item} key={index}>
})
}
</tbody>
</table>
);
假设您所在的州有一系列项目：
[{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>
