我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
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>
);
}
其他回答
只需执行以下操作：
<tbody>｛new Array（numRows）.fill（“”，0，numRows”）.map（（p，i）=>＜YourRaw key＝｛i｝/>）｝</tbody>
随着时间的推移，语言越来越成熟，我们经常会遇到这样的常见问题。问题是循环组件“n”次。
{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}
其中，n-是要循环的次数。项将未定义，索引将照常。此外，ESLint不鼓励使用数组索引作为键。
但是，您的优点是不需要在之前初始化数组，最重要的是避免了for循环。。。
为了避免项目未定义带来的不便，您可以使用_，这样在进行linting时就会忽略它，并且不会引发任何linting错误，例如
{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}
我找到了另一个解决方案提供：
<tbody>{this.getcontent()}</tbody>
还有一个单独的功能：
getcontent() {
const bodyarea = this.state.movies.map(movies => (
<tr key={movies._id}>
<td>{movies.title}</td>
<td>{movies.genre.name}</td>
<td>{movies.numberInStock}</td>
<td>{movies.publishDate}</td>
<td>
<button
onClick={this.deletMovie.bind(this, movies._id)}
className="btn btn-danger"
>
Delete
</button>
</td>
</tr>
));
return bodyarea;
}
这个例子很容易解决许多问题。
除非声明函数并用参数将其括起来，否则这是不可能的。在JSXExpression中，您只能编写表达式，而不能编写诸如for（）、声明变量或类或if（）语句之类的语句。
这就是为什么函数CallExpressions现在如此流行的原因。我的建议是：习惯它们。我会这样做：
const names = ['foo', 'bar', 'seba']
const people = <ul>{names.map(name => <li>{name}</li>)}</ul>
过滤：
const names = ['foo', undefined, 'seba']
const people = <ul>{names.filter(person => !!person).map(name => <li>{name}</li>)}</ul>
if（）：
var names = getNames()
const people = {names && names.length &&
<ul>{names.map(name => <li>{name}</li>)}</ul> }
如果-其他：
var names = getNames()
const people = {names && names.length ?
<ul>{names.map(name => <li>{name}</li>)}</ul> : <p>no results</p> }
一行（假设numrows是一个数字）：
<tbody>
{
Array(numrows).fill().map(function (v, i) {
return <ObjectRow/>
})
}
</tbody>
