我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
有趣的是，人们如何使用更新的语法或不常见的方法来创建数组，从而给出“创造性”的答案。在我使用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} />)
);
其他回答
也可以在返回块外部提取：
render: function() {
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return (<tbody>{rows}</tbody>);
}
如果您真的想在JSX中使用for循环，可以使用IIFE。
<tbody>
{
(function () {
const view = [];
for (let i = 0; i < numrows; i++) {
view.push(<ObjectRow key={i}/>);
}
return view;
}())
}
</tbody>
@jacefarm如果我理解正确，您可以使用以下代码：
<tbody>
{ new Array(numrows).fill(<ObjectRow/>) }
</tbody>
您可以使用以下代码：
<tbody>
{ new Array(numrows).fill('').map((item, ind) => <ObjectRow key={ind}/>) }
</tbody>
还有这个：
<tbody>
new Array(numrows).fill(ObjectRow).map((Item, ind) => <Item key={ind}/>)
</tbody>
在JSX块中围绕JavaScript代码使用｛｝，使其正确执行您尝试执行的任何JavaScript操作。
<tr>
<td>
{data.map((item, index) => {
{item}
})}
</td>
</tr>
这有点模糊，但您可以为任何阵列交换数据。这将为每个项提供一个表行和表项。如果阵列的每个节点中都有不止一个对象，那么您将希望通过执行以下操作来实现这一目标：
<td>{item.someProperty}</td>
在这种情况下，您将希望用不同的td包围它，并以不同的方式排列前面的示例。
您可以直接在JSX中执行相同的操作，使用map而不是for of循环：
render: function() {
const items = ['one', 'two', 'three'];
return (
<ul>
{items.map((value, index) => {
return <li key={index}>{value}</li>
})}
</ul>
)
}
