我来自C#背景,但我是React和JS的新手。我想知道在声明数组时是否有办法使用lambda函数,例如:
this.state = {
arr: Array(9).fill( (i) => {<Foo index={i} />} ),
};
我试图在索引中使用升序值创建一个React.Components数组,并且希望这是一个可行的选项。
答案 0 :(得分:8)
不单独使用0
,因为它只会分配而不是调用您提供的功能。
.fill()
然而,您可以将其与.map()
一起使用来实现此目的。您提供的迭代器函数将被赋予索引作为第二个参数(使用Array(3).fill(() => {}); // [ function, function, function ]
作为第一个的一次性变量)。
_
使用两者是必要的,因为Array(9).fill(0).map((_, i) => <Foo index={i} />)
仅分配数组Array(9)
,而不会分配索引。
length
虽然'length' in Array(9) // true
0 in Array(9) // false
可用于未分配的索引,但.fill()
会明确忽略它们。
您也可以使用Array.from()
,它接受与.map()
相同的迭代器。
.map()
另外,有了它,第一个参数不一定必须是Array.from(Array(9), (_, i) => <Foo index={i} />)
:
Array
答案 1 :(得分:1)
可能是这样的:
this.state = {
arr: new Array(5).map((emptyElement, index) => <Foo index={index} />);
}
答案 2 :(得分:1)
尝试:
this.state = {
arr: Array.from(Array(9), (value, index) => <Foo index={index} />)
}
答案 3 :(得分:0)
您不应该向州it's a good practice to put just serializable data in it添加组件。此外,应在render()
内创建组件。
无论如何,如果你想做类似创建的东西,比方说,一组数字,我会做这样的事情:
this.state = {
arr: Array(9).fill().map((v, i) => i),
};
或者,假设这些数字始终从0
开始:
this.state = {
arr: [...Array(9).keys()],
};