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>