我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
以下是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使用键来区分数组中的数据。
其他回答
如果您已经在使用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>
);
}
}
您可以执行以下操作来重复组件numrows次
<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>
也许是当今最大开发者的标准，使用这样的结构：
let data = [
{
id: 1,
name: "name1"
},
{
id: 2,
name: "name2"
},
{
id: 3,
name: "name3"
},
{
id: 100,
name: "another name"
}
];
export const Row = data => {
return (
<tr key={data.id}>
<td>{data.id}</td>
<td>{data.name}</td>
</tr>
);
};
function App() {
return (
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>{data.map(item => Row(item))}</tbody>
</table>
);
}
在JSX中，在HTML或任何代码中编写JavaScript操作，｛data.map（item=>Row（item））｝，在map函数中使用单花括号。了解更多地图信息。
这里还可以看到以下输出。
JSX内部的循环非常简单。试试看：
return this.state.data.map((item, index) => (
<ComponentName key={index} data={item} />
));
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>
)
}
