我试图在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中通过迭代对象数组或普通数组实现的可能解决方案
const rows = [];
const numrows = [{"id" : 01, "name" : "abc"}];
numrows.map((data, i) => {
rows.push(<ObjectRow key={data.id} name={data.name}/>);
});
<tbody>
{ rows }
</tbody>
Or
const rows = [];
const numrows = [1,2,3,4,5];
for(let i=1, i <= numrows.length; i++){
rows.push(<ObjectRow key={numrows[i]} />);
};
<tbody>
{ rows }
</tbody>
最近几天,我熟悉的一种更好的迭代对象数组的方法是直接在渲染中使用.map,可以返回也可以不返回:
.map带返回
const numrows = [{"id" : 01, "name" : "abc"}];
<tbody>
{numrows.map(data=> {
return <ObjectRow key={data.id} name={data.name}/>
})}
</tbody>
.map不返回
const numrows = [{"id" : 01, "name" : "abc"}];
<tbody>
{numrows.map(data=> (
<ObjectRow key={data.id} name={data.name}/>
))}
</tbody>
其他回答
如果选择在render方法的return()内部转换此值,最简单的方法就是使用map()方法。使用Map()函数将数组映射到JSX语法,如下所示(使用ES6语法)。
在父组件内部:
<tbody>
{ objectArray.map(object => <ObjectRow key={object.id} object={object.value} />) }
</tbody>
请注意,key属性已添加到子组件中。如果没有提供密钥属性,您可以在控制台上看到以下警告。
警告:数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。
注意:人们经常犯的一个错误是在迭代时使用索引作为关键字。使用元素的索引作为键是一种反模式,您可以在这里阅读有关它的更多信息。简而言之,如果它不是一个静态列表,就不要使用索引作为键。
现在,在ObjectRow组件中,可以从对象的财产访问该对象。
在ObjectRow组件内部
const { object } = this.props
Or
const object = this.props.object
这将获取从父组件传递到ObjectRow组件中的变量对象的对象。现在,您可以根据您的目的吐出该对象中的值。
参考文献:
JavaScript中的map()方法
ECMAScript 6或ES6
有多种方法可以做到这一点。JSX最终会被编译成JavaScript,所以只要你编写了有效的JavaScript,你就会很好。
我的回答旨在巩固这里已经介绍的所有精彩方式:
如果没有对象数组,只需输入行数:
在返回块中,创建一个Array并使用Array.prototype.map:
render() {
return (
<tbody>
{Array(numrows).fill(null).map((value, index) => (
<ObjectRow key={index}>
))}
</tbody>
);
}
在返回块之外,只需使用普通的JavaScript for循环:
render() {
let rows = [];
for (let i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return (
<tbody>{rows}</tbody>
);
}
立即调用的函数表达式:
render() {
return (
<tbody>
{(() => {
let rows = [];
for (let i = 0; i < numrows; i++) {
rows.push(<ObjectRow key={i}/>);
}
return rows;
})()}
</tbody>
);
}
如果您有一个对象数组
在返回块中,.map()将每个对象映射到<ObjectRow>组件:
render() {
return (
<tbody>
{objectRows.map((row, index) => (
<ObjectRow key={index} data={row} />
))}
</tbody>
);
}
在返回块之外,只需使用普通的JavaScript for循环:
render() {
let rows = [];
for (let i = 0; i < objectRows.length; i++) {
rows.push(<ObjectRow key={i} data={objectRows[i]} />);
}
return (
<tbody>{rows}</tbody>
);
}
立即调用的函数表达式:
render() {
return (
<tbody>
{(() => {
const rows = [];
for (let i = 0; i < objectRows.length; i++) {
rows.push(<ObjectRow key={i} data={objectRows[i]} />);
}
return rows;
})()}
</tbody>
);
}
你必须用JSX写:
<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。
这里有一个简单的解决方案。
var Object_rows = [];
for (var i = 0; i < numrows; i++) {
Object_rows.push(<ObjectRow />);
}
<tbody>{Object_rows}</tbody>;
不需要映射和复杂代码。您只需要将行推送到数组并返回值来渲染它。