react迴圈列表的方法:1、map迴圈,程式碼為【let MyDom =arr.map((item,index)=>】;2、for迴圈,程式碼為【for(var i=0;i<arr.length;i++)】。
該方法適用於所有品牌電腦
react迴圈列表的方法:
1.map迴圈
<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值之後則不會報錯
<script type="text/babel"> let arr=["吃飯","睡覺","喝水"] let MyDom =arr.map((item,index)=>{ //key值必須是獨一無二的 return <p key={index}>{item}</p> }) ReactDOM.render(MyDom,document.getElementById("demoReact")) </script>
如果在return之後的程式碼想換到下一行,直接回車好用麼?
//直接回車換行 return <p key={index}>{item}</p>
當然不好用,解決辦法就是使用()包裹元素,換行之後才能正常顯示
所以養成一個習慣:無論換不換行都加上 ()
//用括號包裹住換行元素 let MyDom =arr.map((item,index)=>{ return ( <p key={index}>{item}</p>) })
2.for in迴圈
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迴圈
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迴圈
function fun(){ arr.forEach(a=>{ console.log(a); }) }
相關免費學習推薦:(視訊)
以上就是react怎麼迴圈列表的詳細內容,更多請關注TW511.COM其它相關文章!