我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
除非声明函数并用参数将其括起来,否则这是不可能的。在JSXExpression中,您只能编写表达式,而不能编写诸如for()、声明变量或类或if()语句之类的语句。
这就是为什么函数CallExpressions现在如此流行的原因。我的建议是:习惯它们。我会这样做:
const names = ['foo', 'bar', 'seba']
const people = <ul>{names.map(name => <li>{name}</li>)}</ul>
过滤:
const names = ['foo', undefined, 'seba']
const people = <ul>{names.filter(person => !!person).map(name => <li>{name}</li>)}</ul>
if():
var names = getNames()
const people = {names && names.length &&
<ul>{names.map(name => <li>{name}</li>)}</ul> }
如果-其他:
var names = getNames()
const people = {names && names.length ?
<ul>{names.map(name => <li>{name}</li>)}</ul> : <p>no results</p> }
其他回答
假设您所在的州有一系列项目:
[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]
<tbody>
{this.state.items.map((item) => {
<ObjectRow key={item.id} name={item.name} />
})}
</tbody>
只需执行以下操作:
<tbody>{new Array(numRows).fill(“”,0,numRows”).map((p,i)=><YourRaw key={i}/>)}</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
您可以执行以下操作来重复组件numrows次
<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>
如果你真的想要一个for循环等价物(你有一个数字,而不是一个数组),只需使用Lodash中的范围。
不要重新发明轮子,不要混淆代码。只需使用标准实用程序库。
import range from 'lodash/range'
range(4);
// => [0, 1, 2, 3]
range(1, 5);
// => [1, 2, 3, 4]