在React JSX中循环
我正在尝试在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。 但是，来自模板领域并且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
把它想象成你只是在调用JavaScript函数。 你不能在函数调用中放置一个for循环：
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
但是你可以创建一个数组，然后将其传递给：
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
使用JSX时，您可以使用基本相同的结构：
var rows = [];
for (var i = 0; i < numrows; i++) {
// note: we add 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的工作方式。
不知道这是否适合你的情况，但通常地图是一个很好的答案。
如果这是你用for循环的代码：
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
你可以像这样用地图写下来：
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6语法：
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
如果你还没有像@ FakeRainBrigand的答案那样map()的数组，并且想要内联这个，那么源布局对应的输出比@ SophieAlpert的答案更接近：
借助ES2015（ES6）语法（扩展和箭头函数）
http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview
<tbody>
{[...Array(10)].map((x, i) =>
<ObjectRow key={i} />
)}
</tbody>
Re：与Babel一起发布，它的警告页面说Array.from是传播所必需的，但是目前（ v5.8.23 ），当传播一个真实的Array时似乎并不是这种情况。 我有一个文档问题，以澄清这一点。 但是请自担风险或使用polyfill。
香草ES5
Array.apply
<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方法
使用Array.prototype.fill您可以将其作为使用传播的替代方法，如上所示：
<tbody>
{Array(10).fill(1).map((el, i) =>
<ObjectRow key={i} />
)}
</tbody>
（我认为你实际上可以省略任何参数来fill() ，但我不是100％）。感谢@FakeRainBrigand在fill()解决方案的早期版本中纠正我的错误（请参阅修订版）。
key
在所有情况下， key attr缓解发展构建的警告，但儿童无法访问。 如果您希望子项中可用索引，则可以传递额外的attr。 请参阅列表和键以供讨论。