我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
以下是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使用键来区分数组中的数据。
其他回答
使用Array映射函数是一种非常常见的循环遍历元素数组并在React中根据元素创建组件的方法。这是一种很好的循环方式,非常有效,也是在JSX中进行循环的一种整洁的方式。这不是唯一的方法,而是首选的方法。
此外,不要忘记根据需要为每个迭代提供唯一的Key。map函数从0创建一个唯一索引,但不建议使用生成的索引,但如果您的值是唯一的或存在唯一的键,则可以使用它们:
<tbody>
{numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>
此外,如果您不熟悉Array上的map函数,MDN中的几行代码:
map为数组,并根据结果构造一个新数组。回调仅对具有赋值的数组的索引调用,包括未定义的。对于缺少数组(即从未设置过的索引删除或从未被赋值)。回调是用三个参数调用的:元素的值,元素的索引和正在遍历的Array对象。如果向映射提供了thisArg参数,它将用作callback就是这个值。否则,未定义的值将用作这就是它的价值。回调最终可观察到的值为根据通常的规则确定通过函数。map不会改变调用它的数组(尽管回调(如果调用)可能会这样做)。
也可以在返回块外部提取:
render: function() {
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return (<tbody>{rows}</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>
);
}
}
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>
)
}
你必须用JSX写:
<tbody>
{
objects.map((object, i) => (
<ObjectRow obj={object} key={i} />
));
}
</tbody>