我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。
我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
不能在JSX中直接使用任何循环或其他额外方法。相反,您可以做的是为其生成单独的函数,并生成循环语句,然后在该函数中返回组件上述代码示例:
function renderObjectRow (){
for (var i=0; i < numrows; i++) {
return <ObjectRow/>
}
}
<tbody>
{renderObjectRow()}
</tbody>
其他回答
您还可以使用自调用函数:
return <tbody>
{(() => {
let row = []
for (var i = 0; i < numrows; i++) {
row.push(<ObjectRow key={i} />)
}
return row
})()}
</tbody>
JSX内部有多种循环方式
使用for循环函数TableBodyForLoop(props){常量行=[];//创建数组以存储tr列表for(设i=0;i<props.people.length;i++){const person=道具.人物[i];//将tr推到数组,关键是行.推(<tr key={person.id}><td>{person.id}</td><td>{人名}</td></tr>);}//返回tbody内的行return<tbody>{rows}</tbody>;}使用ES6阵列映射方法函数TableBody(props){返回(<tbody>{props.people.map(person=>(<tr key={person.id}><td>{person.id}</td><td>{人名}</td></tr>))}</tbody>);}
完整示例:https://codesandbox.io/s/cocky-meitner-yztif
以下React文档将有所帮助
列表和键条件渲染
ECMAScript 2015/Babel可能使用生成器函数创建JSX数组:
function* jsxLoop(times, callback)
{
for(var i = 0; i < times; ++i)
yield callback(i);
}
...
<tbody>
{[...jsxLoop(numrows, i =>
<ObjectRow key={i}/>
)]}
</tbody>
以下是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使用键来区分数组中的数据。
使用地图功能。
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>