我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
试试这个
<tbody>
{new Array(numrows).map((row,index)=><ObjectRow key={***someThingUniqe***}/>)} //don't use index as key
</tbody>
如果您想知道为什么不应该在react中使用索引作为键，请检查此项
其他回答
有几个答案指向使用map语句。下面是一个完整的示例，它使用FeatureList组件中的迭代器基于一个称为features的JSON数据结构列出Feature组件。
const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
<div className="feature-list">
{features.map(feature =>
<Feature
key={feature.id}
{...feature}
onClickFeature={() => onClickFeature(feature.id)}
onClickLikes={() => onClickLikes(feature.id)}
/>
)}
</div>
);
您可以在GitHub上查看完整的FeatureList代码。此处列出了特征夹具。
如果您真的想在JSX中使用for循环，可以使用IIFE。
<tbody>
{
(function () {
const view = [];
for (let i = 0; i < numrows; i++) {
view.push(<ObjectRow key={i}/>);
}
return view;
}())
}
</tbody>
JSX内部的循环非常简单。试试看：
return this.state.data.map((item, index) => (
<ComponentName key={index} data={item} />
));
您可以执行以下操作来重复组件numrows次
<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>
如果您习惯于Angular，并希望采用更像React的方法：
尝试使用这个带有自动哈希和可选trackBy的简单组件，类似于Angular。
用法：
<For items={items}>
{item => <div>item</div>}
</For>
自定义键/轨迹依据：
<For items={items} trackBy={'name'}>
{item => <div>item</div>}
</For>
定义：
export default class For<T> extends Component<{ items: T[], trackBy?: keyof T, children: (item: T) => React.ReactElement }, {}> {
render() {
return (
<Fragment>
{this.props.items.map((item: any, index) => <Fragment key={this.props.trackBy ?? item.id ?? index}>{this.props.children(item)}</Fragment>)}
</Fragment>
);
}
}
React开发工具：
