我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
好了，给你。
{
[1, 2, 3, 4, 5, 6].map((value, index) => {
return <div key={index}>{value}</div>
})
}
您所要做的只是映射数组并返回任何要渲染的内容。请不要忘记在返回的元素中使用key。
其他回答
如果您还没有像@FakeRainBrigand的答案那样的要映射（）的数组，并且希望内联该数组，以使源布局与比@SophieAlpert的答案更接近的输出相对应：
使用ES2015（ES6）语法（扩展和箭头函数）
http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview
<tbody>
{[...Array(10)].map((x, i) =>
<ObjectRow key={i} />
)}
</tbody>
回复：使用Babel进行传输时，其警告页面显示Array.from是传播所必需的，但目前（v5.2.23）在传播实际的Array时似乎并非如此。我有一个文件问题需要澄清。但请自行承担风险或使用polyfill。
香草ES5
阵列应用
<tbody>
{Array.apply(0, Array(10)).map(function (x, i) {
return <ObjectRow key={i} />;
})}
</tbody>
内联IIFE
http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview
<tbody>
{(function (rows, i, len) {
while (++i <= len) {
rows.push(<ObjectRow key={i} />)
}
return rows;
})([], 0, 10)}
</tbody>
其他答案的技术组合
保持与输出相对应的源布局，但使内联部分更紧凑：
render: function () {
var rows = [], i = 0, len = 10;
while (++i <= len) rows.push(i);
return (
<tbody>
{rows.map(function (i) {
return <ObjectRow key={i} index={i} />;
})}
</tbody>
);
}
使用ES2015语法和数组方法
对于Array.prototype.fill，您可以这样做，作为使用如上所示的排列的替代方法：
<tbody>
{Array(10).fill(1).map((el, i) =>
<ObjectRow key={i} />
)}
</tbody>
（我认为你实际上可以省略fill（）的任何参数，但我不是100%。）感谢@FakeRainBrigand在fill（）解决方案的早期版本中纠正了我的错误（请参阅修订版）。
key
在所有情况下，关键属性都会减轻开发构建的警告，但在孩子中无法访问。如果希望子级中的索引可用，可以传递额外的属性。有关讨论，请参见列表和键。
在JSX块中围绕JavaScript代码使用｛｝，使其正确执行您尝试执行的任何JavaScript操作。
<tr>
<td>
{data.map((item, index) => {
{item}
})}
</td>
</tr>
这有点模糊，但您可以为任何阵列交换数据。这将为每个项提供一个表行和表项。如果阵列的每个节点中都有不止一个对象，那么您将希望通过执行以下操作来实现这一目标：
<td>{item.someProperty}</td>
在这种情况下，您将希望用不同的td包围它，并以不同的方式排列前面的示例。
您可能需要签出React Templates，它允许您在React中使用JSX样式的模板，并带有一些指令（例如rt repeat）。
如果使用反应模板，您的示例如下：
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>
如果您习惯于Angular，并希望采用更像React的方法：
尝试使用这个带有自动哈希和可选trackBy的简单组件，类似于Angular。
用法：
<For items={items}>
{item => <div>item</div>}
</For>
自定义键/轨迹依据：
<For items={items} trackBy={'name'}>
{item => <div>item</div>}
</For>
定义：
export default class For<T> extends Component<{ items: T[], trackBy?: keyof T, children: (item: T) => React.ReactElement }, {}> {
render() {
return (
<Fragment>
{this.props.items.map((item: any, index) => <Fragment key={this.props.trackBy ?? item.id ?? index}>{this.props.children(item)}</Fragment>)}
</Fragment>
);
}
}
React开发工具：
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>
);
}
