我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
以下是您可以在React中通过迭代对象数组或普通数组实现的可能解决方案
const rows = [];
const numrows = [{"id" : 01, "name" : "abc"}];
numrows.map((data, i) => {
rows.push(<ObjectRow key={data.id} name={data.name}/>);
});
<tbody>
{ rows }
</tbody>
Or
const rows = [];
const numrows = [1,2,3,4,5];
for(let i=1, i <= numrows.length; i++){
rows.push(<ObjectRow key={numrows[i]} />);
};
<tbody>
{ rows }
</tbody>
最近几天，我熟悉的一种更好的迭代对象数组的方法是直接在渲染中使用.map，可以返回也可以不返回：
.map带返回
const numrows = [{"id" : 01, "name" : "abc"}];
<tbody>
{numrows.map(data=> {
return <ObjectRow key={data.id} name={data.name}/>
})}
</tbody>
.map不返回
const numrows = [{"id" : 01, "name" : "abc"}];
<tbody>
{numrows.map(data=> (
<ObjectRow key={data.id} name={data.name}/>
))}
</tbody>
其他回答
如果您还没有像@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的函数：
const myExample = () => {
let myArray = []
for(let i = 0; i<5;i++) {
myArray.push(<MyComponent/>)
}
return myArray
}
//... in JSX
<tbody>
{myExample()}
</tbody>
您还可以使用自调用函数：
return <tbody>
{(() => {
let row = []
for (var i = 0; i < numrows; i++) {
row.push(<ObjectRow key={i} />)
}
return row
})()}
</tbody>
想象一下，你只是在调用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。
