我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
您可以直接在JSX中执行相同的操作，使用map而不是for of循环：
render: function() {
const items = ['one', 'two', 'three'];
return (
<ul>
{items.map((value, index) => {
return <li key={index}>{value}</li>
})}
</ul>
)
}
其他回答
假设您所在的州有一系列项目：
[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]
<tbody>
{this.state.items.map((item) => {
<ObjectRow key={item.id} name={item.name} />
})}
</tbody>
如果您已经在使用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>
);
}
}
随着时间的推移，语言越来越成熟，我们经常会遇到这样的常见问题。问题是循环组件“n”次。
{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}
其中，n-是要循环的次数。项将未定义，索引将照常。此外，ESLint不鼓励使用数组索引作为键。
但是，您的优点是不需要在之前初始化数组，最重要的是避免了for循环。。。
为了避免项目未定义带来的不便，您可以使用_，这样在进行linting时就会忽略它，并且不会引发任何linting错误，例如
{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}
如果选择在render方法的return（）内部转换此值，最简单的方法就是使用map（）方法。使用Map（）函数将数组映射到JSX语法，如下所示（使用ES6语法）。
在父组件内部：
<tbody>
{ objectArray.map(object => <ObjectRow key={object.id} object={object.value} />) }
</tbody>
请注意，key属性已添加到子组件中。如果没有提供密钥属性，您可以在控制台上看到以下警告。
警告：数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。
注意：人们经常犯的一个错误是在迭代时使用索引作为关键字。使用元素的索引作为键是一种反模式，您可以在这里阅读有关它的更多信息。简而言之，如果它不是一个静态列表，就不要使用索引作为键。
现在，在ObjectRow组件中，可以从对象的财产访问该对象。
在ObjectRow组件内部
const { object } = this.props
Or
const object = this.props.object
这将获取从父组件传递到ObjectRow组件中的变量对象的对象。现在，您可以根据您的目的吐出该对象中的值。
参考文献：
JavaScript中的map（）方法
ECMAScript 6或ES6
在React中使用map是迭代数组的最佳实践。
为了防止ES6出现一些错误，React中使用了如下语法映射：
<tbody>
{items.map((item, index) => <ObjectRow key={index} name={item.name} />)}
</tbody>
在这里，您调用一个组件＜ObjectRow/＞，因此不需要在箭头后面加括号。
但你也可以这样做：
{items.map((item, index) => (
<ObjectRow key={index} name={item.name} />
))}
Or:
{items.map((item, index) => {
// Here you can log 'item'
return (
<ObjectRow key={index} name={item.name} />
)
})}
我这么说是因为如果在箭头后面加上括号“｛｝”，React将不会抛出错误，并显示白名单。
