我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
ES2015 Array.from，带有map函数+键
如果对.map（）没有任何内容，可以使用Array.from（）和map函数来重复元素：
<tbody>
{Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>
其他回答
这里有一个简单的解决方案。
var Object_rows = [];
for (var i = 0; i < numrows; i++) {
Object_rows.push(<ObjectRow />);
}
<tbody>{Object_rows}</tbody>;
不需要映射和复杂代码。您只需要将行推送到数组并返回值来渲染它。
我倾向于采用编程逻辑发生在render返回值之外的方法。这有助于保持实际呈现的内容易于理解。
所以我可能会做一些类似的事情：
import _ from 'lodash';
...
const TableBody = ({ objects }) => {
const objectRows = objects.map(obj => <ObjectRow object={obj} />);
return <tbody>{objectRows}</tbody>;
}
诚然，这是一个很小的代码量，内联它可能会很好。
如果numrows是一个数组，则非常简单：
<tbody>
{numrows.map(item => <ObjectRow />)}
</tbody>
React中的数组数据类型要好得多。一个数组可以支持一个新的数组，并支持过滤、减少等。
想象一下，你只是在调用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的工作原理。
好了，给你。
{
[1, 2, 3, 4, 5, 6].map((value, index) => {
return <div key={index}>{value}</div>
})
}
您所要做的只是映射数组并返回任何要渲染的内容。请不要忘记在返回的元素中使用key。
