我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
您可能需要签出React Templates，它允许您在React中使用JSX样式的模板，并带有一些指令（例如rt repeat）。
如果使用反应模板，您的示例如下：
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>
其他回答
我找到了另一个解决方案提供：
<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;
}
这个例子很容易解决许多问题。
我不确定这是否适用于您的情况，但通常[map][1]是一个很好的答案。
如果这是使用for循环的代码：
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
你可以用map函数这样写：
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
objects.map是进行循环的最佳方式，objects.filter是过滤所需数据的最佳方式。过滤后的数据将形成一个新的数组和对象。some是检查数组是否满足给定条件的最佳方法（它返回布尔值）。
要循环多次并返回，可以通过from和map实现：
<tbody>
{
Array.from(Array(i)).map(() => <ObjectRow />)
}
</tbody>
其中i=次数
如果您想为渲染组件分配唯一的键ID，可以使用React文档中建议的React.Children.toArray
对阵列进行反应
将子级不透明数据结构作为平面数组返回，并为每个子级分配键。如果要在渲染方法中处理子对象的集合，特别是如果要在传递之前对this.props.children进行重新排序或切片，则非常有用。
注：React.Children.toArray（）在展平子列表时更改键以保留嵌套数组的语义。也就是说，toArray在返回的数组中给每个键加前缀，以便每个元素的键都被限定到包含它的输入数组中。
<tbody>
{
React.Children.toArray(
Array.from(Array(i)).map(() => <ObjectRow />)
)
}
</tbody>
const numrows = [1, 2, 3, 4, 5];
cosnt renderRows = () => {
return numros.map((itm,index) => <td key={index}>{itm}</td>)
}
return <table>
............
<tr>
{renderRows()}
</tr>
</table>
这里有一个简单的解决方案。
var Object_rows = [];
for (var i = 0; i < numrows; i++) {
Object_rows.push(<ObjectRow />);
}
<tbody>{Object_rows}</tbody>;
不需要映射和复杂代码。您只需要将行推送到数组并返回值来渲染它。
