本文摘自PHP中文网，作者coldplay.xixi，侵删。
react循环列表的方法：1、map循环，代码为【let MyDom =arr.map((item,index)=>】；2、for循环，代码为【for(var i=0;i<arr.length;i++)】。
react循环列表的方法：
1.map循环
1 2 3 4 5 6 7 | <script type="text/babel">
let arr=["吃饭","睡觉","喝水"]
let MyDom =arr.map((item,index)=>{
return <p>{item}</p>
})
ReactDOM.render(MyDom,document.getElementById("demoReact"))
</script>
|
遍历倒是能在页面上显示，控制台却报错了，原因是你得设置唯一的key，方便之后对数组进行操作
加上key值之后则不会报错
1 2 3 4 5 6 7 8 | <script type="text/babel">
let arr=["吃饭","睡觉","喝水"]
let MyDom =arr.map((item,index)=>{
return <p key={index}>{item}</p>
})
ReactDOM.render(MyDom,document.getElementById("demoReact"))
</script>
|
如果在return之后的代码想换到下一行,直接回车好用么?
1 2 3 | return
<p key={index}>{item}</p>
|
当然不好用，解决办法就是使用（）包裹元素，换行之后才能正常显示
所以养成一个习惯：无论换不换行都加上 （）
1 2 3 4 5 | let MyDom =arr.map((item,index)=>{
return (
<p key={index}>{item}</p>)
})
|
2.for in循环
1 2 3 4 5 6 7 8 9 | function fun(){
let newarr=[];
for(let index in arr){
newarr.push(<p key={index}>{arr[index]}</p>)
}
return newarr;
}
ReactDOM.render(fun(),document.getElementById("demoReact"))
|
3.for循环
1 2 3 4 5 6 7 | function fun(){
let newarr=[];
for(var i=0;i<arr.length;i++){
newarr.push(<p key={i}>{arr[i]}</p>)
}
return newarr;
}
|
4.for each循环
1 2 3 4 5 | function fun(){
arr.forEach(a=>{
console.log(a);
})
}
|
相关免费学习推荐：javascript（视频）
以上就是react怎么循环列表的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
如何解决webstorm创建React失败问题
React怎么mock数据
React设置文件路径别名的具体方法你知道么
React中支持fetch吗
React native和React的区别是什么
一些关于React的常见面试题（分享）
React移动端框架有哪些
React中ant design mobile是什么
没有babel能运行vue与React吗
React native的特点是什么
更多相关阅读请进入《React》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » react怎么循环列表
