我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
我用它就像
<tbody>
{ numrows ? (
numrows.map(obj => { return <ObjectRow /> })
) : null
}
</tbody>
其他回答
有趣的是，人们如何使用更新的语法或不常见的方法来创建数组，从而给出“创造性”的答案。在我使用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} />)
);
想象一下，你只是在调用JavaScript函数。不能在函数调用的参数所在的位置使用for循环：
return tbody(
for (let i = 0; i < numrows; i++) {
ObjectRow()
}
)
看看函数tbody是如何作为参数传递给for循环的——导致语法错误。
但您可以创建一个数组，然后将其作为参数传入：
const rows = [];
for (let i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
使用JSX时，基本上可以使用相同的结构：
const rows = [];
for (let i = 0; i < numrows; i++) {
// note: we are adding a key prop here to allow react to uniquely identify each
// element in this array. see: https://reactjs.org/docs/lists-and-keys.html
rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;
顺便说一下，我的JavaScript示例几乎与JSX的示例完全相同。玩Babel REPL，了解JSX的工作原理。
您可以执行以下操作来重复组件numrows次
<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>
您可以从numRows创建数组并映射它
像这样的东西：
<tbody>
{Array.from({ length: numrows }).map((_,i)=><ObjectRow key={i}/>)
</tbody>
Array.from是最好的方法。如果您想创建一个具有一定长度的JSX数组。
function App() {
return (
<tbody>
{Array.from({ length: 10 }, (_, key) => (
<ObjectRow {...{ key }} />
))}
</tbody>
);
}
上面的示例适用于没有数组的情况，因此，如果您有数组，则应在JSX中将其映射为：
function App() {
return (
<tbody>
{list.map((item, key) => (
<ObjectRow {...{ key }} />
))}
</tbody>
);
}
