javascript – 在ReactJS中,你可以在Array.fill中使用循环吗?

前端之家收集整理的这篇文章主要介绍了javascript – 在ReactJS中,你可以在Array.fill中使用循环吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我来自C#背景,但一般都是React和JS的新手.我想知道在声明数组时是否有办法使用lambda函数,例如:
this.state = {
arr: Array(9).fill( (i) => {<Foo index={i} />} ),};

我正在尝试使用索引中的升序值来生成React.Components数组,并且希望这是一个可行的选项.

解决方法

不单独使用.fill(),因为它只是分配而不是调用你给它的函数.
Array(3).fill(() => {}); // [ function,function,function ]

但是,您可以将它与.map()一起使用来实现此目的.您提供的迭代器函数将被赋予索引作为第二个参数(使用_作为第一个的一次性变量).

Array(9).fill(0).map((_,i) => <Foo index={i} />)

使用两者是必要的,因为Array(9)只分配数组的长度,使索引保持未分配状态.

'length' in Array(9) // true
0 in Array(9) // false

虽然.fill()将使用未分配的索引,但.map()特别会忽略它们.

您也可以使用Array.from(),它接受与.map()相同的迭代器.

Array.from(Array(9),(_,i) => <Foo index={i} />)

另外,使用它,第一个参数不一定必须是一个数组:

Array.from({ length: 9 },i) => <Foo index={i} />)

猜你在找的JavaScript相关文章