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")
	)
}