我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
想象一下，你只是在调用JavaScript函数。不能在函数调用的参数所在的位置使用for循环：
return tbody(
for (let i = 0; i < numrows; i++) {
ObjectRow()
}
)
看看函数tbody是如何作为参数传递给for循环的——导致语法错误。
但您可以创建一个数组，然后将其作为参数传入：
const rows = [];
for (let i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
使用JSX时，基本上可以使用相同的结构：
const rows = [];
for (let i = 0; i < numrows; i++) {
// note: we are adding a key prop here to allow react to uniquely identify each
// element in this array. see: https://reactjs.org/docs/lists-and-keys.html
rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;
顺便说一下，我的JavaScript示例几乎与JSX的示例完全相同。玩Babel REPL，了解JSX的工作原理。
其他回答
function PriceList({ self }) {
let p = 10000;
let rows = [];
for(let i=0; i<p; i=i+50) {
let r = i + 50;
rows.push(<Dropdown.Item key={i} onClick={() => self.setState({ searchPrice: `${i}-${r}` })}>{i}-{r} ₺</Dropdown.Item>);
}
return rows;
}
<PriceList self={this} />
使用地图功能。
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
好了，给你。
{
[1, 2, 3, 4, 5, 6].map((value, index) => {
return <div key={index}>{value}</div>
})
}
您所要做的只是映射数组并返回任何要渲染的内容。请不要忘记在返回的元素中使用key。
以下是React文档中的一个示例，JavaScript表达式作为子项：
function Item(props) {
return <li>{props.message}</li>;
}
function TodoList() {
const todos = ['finish doc', 'submit pr', 'nag dan to review'];
return (
<ul>
{todos.map((message) => <Item key={message} message={message} />)}
</ul>
);
}
至于你的情况，我建议你这样写：
function render() {
return (
<tbody>
{numrows.map((roe, index) => <ObjectRow key={index} />)}
</tbody>
);
}
请注意，键非常重要，因为React使用键来区分数组中的数据。
您的JSX代码将编译成纯JavaScript代码，任何标记都将被ReactElement对象替换。在JavaScript中，不能多次调用函数来收集返回的变量。
这是非法的，唯一的方法是使用数组来存储函数返回的变量。
或者您可以使用Array.prototype.map来处理这种情况，Array.prototype.map自JavaScriptES5以来就可用。
也许我们可以编写其他编译器来重新创建一个新的JSX语法来实现一个repeat函数，就像Angular的ng repeat一样。
