let arr=["张三","李四","王五"];
let index=0;//初始化index默认值
function fun(){
let myDom=arr.map((v,i)=>{ //v代表vallue i代表index 序号
return <p style={{color:i===index?'red':''}} key={i} onClick={()=>{index=i;render()}}>{v}</p> //判断点击事件,三元表达式
})
return myDom
}
fonction render(){
ReactDOM.render(fun(),document.getElementById("theID"));
}
在js当中(x) => x + 6 就相当于:
function(x){
return x + 6;
}
在实际开发中会经常用到这种简洁写法。
这个案例当中,都要使用到function来封装在一起,render写到了onclick事件当中,相当于每一次点击都是一次渲染。