react遍歷陣列和物件
阿新 • • 發佈：2020-12-16
Map陣列
react中遍歷陣列採用陣列的map迭代
注意：在map中要加key
key 幫助 React 識別哪些元素改變了，比如被新增或刪除。因此你應當給陣列中的每一個元素賦予一個確定的標識
虛擬dom對比的時候，加key可以避免出錯。 如果不加key，當一個元素新增的時候，後面的元素就會經歷解除安裝與重新裝載的過程。
為了避免出錯。所以我們在開發中應該儘量避免用index作為key值，除非我知道index是不變的。
<body> <div id="app"> </div> <script type="text/babel"> const arr = ["a","b","c","d"] ReactDOM.render(<div> <ul> { arr.map((item,index)=>{ return <li key={index}>{item}</li> }) } </ul> </div>,document.getElementById("app")) </script> </body>
如果有2個數組的話，重複寫上述程式碼程式碼的複用性就不好，這時我們可以進行函式封裝
<body> <div id="app"></div> <script type="text/babel"> var arr = ["a","b","c"] var arr2 = ["d","e","f"] //封裝成函式的話，記得內部需要加return關鍵字！ function showList(arr){ return arr.map((item,index)=>{ return <p key={index}>{item}</p> }) } ReactDOM.render(<div> { showList(arr) } { showList(arr2) } </div>,document.getElementById("app")) </script> </body>
一個點選變顏色的小案例
<body> <div id="app"></div> <script type="text/babel"> //return 後面返回一段jsx程式碼的時候，最好加()，為了避免問題 //需求：讓第一項預設新增紅色，後續點選每一項，每一項變紅 //需要我們手動的去執行render函式！ var arr = ["a","b","c"] //設定一個狀態變數 var currentIndex = 0 function showList(arr){ return ( <ul> { arr.map((item,index)=>{ return <li key={index} onClick={()=>{currentIndex=index;render();console.log(currentIndex)}} style={{color:index===currentIndex?"red":''}} >{item}</li> }) } </ul> ) } render() function render(){ ReactDOM.render(<div> {showList(arr)} </div>,document.getElementById("app")) } </script> </body>
react中不能直接遍歷物件，使用 Object.keys(obj)取出陣列的鍵再去遍歷
<body>
<div id="app"></div>
<script type="text/babel">
let obj = {a:1,b:2} //Object.keys(obj)之後變成["a","b"]形式
class App extends React.Component{
render(){
return (
<div>
{
Object.keys(obj).map((item,index)=>{
return <p key={index}>{item} : {obj[item]}</p>
})
}
</div>
)
}
} ReactDOM.render(<App/>,document.getElementById("app"))
</script>
</body>