我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
render() {
const elements = ['one', 'two', 'three'];
const items = []
for (const [index, value] of elements.entries()) {
items.push(<li key={index}>{value}</li>)
}
return (
<div>
{items}
</div>
)
}
其他回答
我倾向于采用编程逻辑发生在render返回值之外的方法。这有助于保持实际呈现的内容易于理解。
所以我可能会做一些类似的事情：
import _ from 'lodash';
...
const TableBody = ({ objects }) => {
const objectRows = objects.map(obj => <ObjectRow object={obj} />);
return <tbody>{objectRows}</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>
);
}
}
只需使用.map（）循环遍历集合，并从每个迭代返回带有道具的＜ObjectRow＞项。
假设对象是某处的数组。。。
<tbody>
{ objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>
如果您真的想在JSX中使用for循环，可以使用IIFE。
<tbody>
{
(function () {
const view = [];
for (let i = 0; i < numrows; i++) {
view.push(<ObjectRow key={i}/>);
}
return view;
}())
}
</tbody>
不能在JSX中直接使用任何循环或其他额外方法。相反，您可以做的是为其生成单独的函数，并生成循环语句，然后在该函数中返回组件上述代码示例：
function renderObjectRow (){
for (var i=0; i < numrows; i++) {
return <ObjectRow/>
}
}
<tbody>
{renderObjectRow()}
</tbody>
