我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
甚至这段代码也能完成同样的工作。
<tbody>
{array.map(i =>
<ObjectRow key={i.id} name={i.name} />
)}
</tbody>
其他回答
有几个答案指向使用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代码。此处列出了特征夹具。
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>
);
}
我见过一个人/以前的答案在数组中使用.contat（），但不是这样。。。
我已经使用concat添加到字符串中，然后通过jQuery选择器在元素上呈现JSX内容：
let list = "<div><ul>";
for (let i=0; i<myArray.length; i++) {
list = list.concat(`<li>${myArray[i].valueYouWant}</li>`);
}
list = list.concat("</ul></div>);
$("#myItem").html(list);
试试这个
<tbody>
{new Array(numrows).map((row,index)=><ObjectRow key={***someThingUniqe***}/>)} //don't use index as key
</tbody>
如果您想知道为什么不应该在react中使用索引作为键，请检查此项
如果没有键值par，则使用以下代码打印数组值-
<div>
{my_arr.map(item => <div>{item} </div> )}
</div>
