react中map的应用

大心连海

当需要遍历数组时，特别是需要遍历多个数组时，我们就可以封装函数，从而提高代码的复用率，还要注意两点哦，1.数组的map可以进行遍历，需要加唯一的key值，2.封装成函数的话，记得内部需要加return关键字！

<div id="app"></div>

//当为多个数组时。
var arr = ["a","b","c"]
var arr2 = ["d","e","f"]

	//封装函数
	  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"))
    

return 后面返回一段jsx代码的时候，最好加()，为了避免问题

react不是vue的那种双向数据绑定的框架，数据改变了，视图不会主动渲染。需要我们手动的去执行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()}
						style = {{color:index===currentIndex?"red":""}}
					)
				})
			}
		</ul>
	)
}

render()
function render(){
	ReactDOM.render(<div>
		{showList(arr)}
		</div>,document.getElementById("app")
	)
}

来源：https://www.cnblogs.com/axingya/p/13591286.html