react教程,如何使用Array.from().map()输出重复子组件?
发布于 作者:苏南大叔 来源:程序如此灵动~
react
项目如何输出多个重复的子组件,当然是使用循环了。在前面的文章里面,使用了map
来实现类似的需求。本文也没有太多的新意,就是通过一个新的函数,叫做Array.from({length:len})
来快速获得对应数据的数组,用于循环。
苏南大叔的程序如此灵动博客,记录苏南大叔和计算机代码的故事。测试环境:create-react-app@5.0.1
,react@18.2.0
,react-dom@18.2.0
,node@16.14.2
。使用循环的原因就是:复制粘贴100回子组件的代码,是不是显得有点sha啊。
前文回顾
前文里面,曾经对react
根据数组生成子组件的事情做过总结。见下文:
上述文章中,典型的代码如下:
render() {
const items = ["苏南大叔", "sunan大叔", "sunan"];
return (
<div>
{items.map((item, index) => (
<div key={index}>{item}</div>
))}
{result}
</div>
);
}
对于完全相同的重复组件来说,数组的定义内容其实并不重要,而循环的次数是更为重要的。参考下面的新写法:
代码一,for
+函数(长度)。
const App = () => {
var list = (length) => {
var res = [];
for (var i = 0; i < length; i++) {
res.push(<div key={i}>占位符2</div>)
}
return res
}
return (<>
{list(2)}
</>)
}
export default App
代码二,array.from(长度).map()
。
const App = () => {
return (<>
{Array.from({ length: 3 }).map((value, index) => {
return (
<p key={index}>占位符3</p>
)
})}
</>)
}
export default App
代码三,Array(长度).fill(内容).map()
const App = () => {
return (<>
{Array(3).fill("占位符4").map((value, index) => {
return (
<p key={index}>{value}</p>
)
})}
</>)
}
export default App
题外话
关于循环体的key
问题,第三方的uuid()
和nanoid()
,以及官方的useId()
都不是正确答案。react
官方回应:key
应该由循环体自身来生成,比如index
,就是非常好的选择。
即使useId()
能够用于输出map
的key
,它依然是以use
开头的官方hook
,并不能用于传统的类组件中。所以,还是洗洗睡吧。
结束语
更多苏南大叔的react
经验文章,请点击:


