我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
您的JSX代码将编译成纯JavaScript代码，任何标记都将被ReactElement对象替换。在JavaScript中，不能多次调用函数来收集返回的变量。
这是非法的，唯一的方法是使用数组来存储函数返回的变量。
或者您可以使用Array.prototype.map来处理这种情况，Array.prototype.map自JavaScriptES5以来就可用。
也许我们可以编写其他编译器来重新创建一个新的JSX语法来实现一个repeat函数，就像Angular的ng repeat一样。
其他回答
在JSX块中围绕JavaScript代码使用｛｝，使其正确执行您尝试执行的任何JavaScript操作。
<tr>
<td>
{data.map((item, index) => {
{item}
})}
</td>
</tr>
这有点模糊，但您可以为任何阵列交换数据。这将为每个项提供一个表行和表项。如果阵列的每个节点中都有不止一个对象，那么您将希望通过执行以下操作来实现这一目标：
<td>{item.someProperty}</td>
在这种情况下，您将希望用不同的td包围它，并以不同的方式排列前面的示例。
在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将不会抛出错误，并显示白名单。
return (
<table>
<tbody>
{
numrows.map((item, index) => {
<ObjectRow data={item} key={index}>
})
}
</tbody>
</table>
);
您只能在JSX元素中编写JavaScript表达式，因此for循环无法工作。您可以先将元素转换为数组，然后使用map函数渲染它：
<tbody>
{[...new Array(numrows)].map((e) => (
<ObjectRow/>
))}
</tbody>
问题是您没有返回任何JSX元素。对于这种情况还有另一种解决方案，但我将提供最简单的解决方案：“使用map函数”！
<tbody>
{ numrows.map(item => <ObjectRow key={item.uniqueField} />) }
</tbody>
它是如此简单和美丽，不是吗？
