我试图在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元素方面有很多解决方案。所有这些都很好,但都直接在循环中使用了索引。我们建议使用数据中的唯一id作为键,但如果数组中的每个对象没有唯一id,我们将使用索引作为键,但是不建议直接使用索引作为密钥。
还有一件事,为什么我们选择.map,但为什么不选择foEach,因为.map返回一个新数组。现在有很多不同的方法。
下面使用.map的不同版本详细说明了如何使用唯一键以及如何使用.map循环JSX元素。
当从数据中返回单个JSX元素和唯一id作为密钥版本时,.map不返回:
const {objects} = this.state;
<tbody>
{objects.map(object => <ObjectRow obj={object} key={object.id} />)}
</tbody>
将数据中的多个JSX元素和唯一id作为密钥版本返回时,不返回.map
const {objects} = this.state;
<tbody>
{objects.map(object => (
<div key={object.id}>
<ObjectRow obj={object} />
</div>
))}
</tbody>
当将单个JSX元素和索引作为键版本返回时,.map没有返回:
const {objects} = this.state;
<tbody>
{objects.map((object, index) => <ObjectRow obj={object} key={`Key${index}`} />)}
</tbody>
当返回多个JSX元素和索引作为密钥版本时,.map没有返回:
const {objects} = this.state;
<tbody>
{objects.map((object, index) => (
<div key={`Key${index}`}>
<ObjectRow obj={object} />
</div>
))}
</tbody>
.map,当返回多个JSX元素和索引作为键版本时返回:
const {objects} = this.state;
<tbody>
{objects.map((object, index) => {
return (
<div key={`Key${index}`}>
<ObjectRow obj={object} />
</div>
)
})}
</tbody>
将数据中的多个JSX元素和唯一id作为密钥版本返回时,使用return的.map:
const {objects} = this.state;
<tbody>
{objects.map(object => {
return (
<div key={object.id}>
<ObjectRow obj={object} />
</div>
)
})}
</tbody>
另一种方式是
render() {
const {objects} = this.state;
const objectItems = objects.map(object => {
return (
<div key={object.id}>
<ObjectRow obj={object} />
</div>
)
})
return(
<div>
<tbody>
{objectItems}
</tbody>
</div>
)
}
其他回答
使用映射到循环
Array.map(arrayItem => {
return <ObjectRow arrayItem={arrayItem}/> // pass array item in component
})
也许是当今最大开发者的标准,使用这样的结构:
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函数中使用单花括号。了解更多地图信息。
这里还可以看到以下输出。
只需使用带有ES6语法的map Array方法:
<tbody>
{items.map(item => <ObjectRow key={item.id} name={item.name} />)}
</tbody>
不要忘记密钥属性。
您可以尝试新的for of循环:
const apple = {
color: 'red',
size: 'medium',
weight: 12,
sugar: 10
}
for (const prop of apple.entries()){
console.log(prop);
}
以下是几个示例:
我见过一个人/以前的答案在数组中使用.contat(),但不是这样。。。
我已经使用concat添加到字符串中,然后通过jQuery选择器在元素上呈现JSX内容:
let list = "<div><ul>";
for (let i=0; i<myArray.length; i++) {
list = list.concat(`<li>${myArray[i].valueYouWant}</li>`);
}
list = list.concat("</ul></div>);
$("#myItem").html(list);