react中map的应用
<p>当需要遍历数组时，特别是需要遍历多个数组时，我们就可以封装函数，从而提高代码的复用率，还要注意两点哦，1.数组的map可以进行遍历，需要加唯一的key值，2.封装成函数的话，记得内部需要加return关键字！</p><pre><code><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"))
</code></pre>
<p>return 后面返回一段jsx代码的时候，最好加()，为了避免问题</p>
<p>react不是vue的那种双向数据绑定的框架，数据改变了，视图不会主动渲染。需要我们手动的去执行render函数！</p>
<p>下面例题：要求是让第一项默认添加红色，后续点击每一项，每一项变红</p>
<pre><code>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")
)
}
</code></pre><br><br>
来源：https://www.cnblogs.com/axingya/p/13591286.html
頁:
[1]