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>