我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
ES2015 Array.from，带有map函数+键
如果对.map（）没有任何内容，可以使用Array.from（）和map函数来重复元素：
<tbody>
{Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</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;
}
这个例子很容易解决许多问题。
JSX内部的循环非常简单。试试看：
return this.state.data.map((item, index) => (
<ComponentName key={index} data={item} />
));
这可以通过多种方式实现。
如上所述，在返回之前，存储数组中的所有元素回路内部回路方法1：让容器=[]；让arr=[1，2，3]//可以是任何数组、对象arr.forEach（（val，索引）=>{容器推送(＜div key＝｛index｝＞值</div>）/*** 1. 所有循环生成的元素都需要密钥* 2. 数组中只能放置一个父元素*例如container.push(*＜div key＝｛index｝＞值</div>＜div＞这将引发错误</div>)**/});返回(＜div＞<div>这里有任何东西</div>＜div＞｛container｝＜/div＞</div>)方法2：返回(＜div＞<div>这里有任何东西</div>＜div＞{(() => {让容器=[]；让arr=[1，2，3]//可以是任何数组、对象arr.forEach（（val，索引）=>{容器推送(＜div key＝｛index｝＞值</div>）});返回容器；})()}</div></div>)
如果您已经在使用lodash，_.times函数很方便。
import React, { Component } from "react";
import Select from "./Select";
import _ from "lodash";
export default class App extends Component {
render() {
return (
<div className="container">
<ol>
{_.times(3, (i) => (
<li key={i}>repeated 3 times</li>
))}
</ol>
</div>
);
}
}
由于您在JSX代码中编写JavaScript语法，因此需要将JavaScript代码包装在大括号中。
row = () => {
var rows = [];
for (let i = 0; i<numrows; i++) {
rows.push(<ObjectRow/>);
}
return rows;
}
<tbody>
{this.row()}
</tbody>
