react-- jsx

jsx中数组的遍历操作

//vue的模板中遍历数组 ==> <li v-for="item in arr">{{item}}</li>
//遍历数组  arr.map
//为什么加key?
//key 帮助 React 识别哪些元素改变了，比如被添加或删除。
//因此你应当给数组中的每一个元素赋予一个确定的标识。
var arr = ["aa","bb","cc"]
ReactDOM.render(
    <div>
        {
            arr.map((item,index)=>{
            	return <p key={index}>{item}</p>
            })
        }
	</div>,
document.querySelector("#box"))

jsx的一些内容

1）标签必须要闭合
2) 在外层只能有一个根元素
3) class ==> className
4) style ==> {{backgroundColor:‘red’}}
5) onClick
onClick={()=>{alert(1)}}
注意： this的指向 建议采用箭头函数（因为箭头函数内部的this与定义这个函数的外部this是同一个）

6. input的value值
   handleChange = (e)=>{
   this.setState({
   value:e.target.value
   })
   }
   

如果只是简单的显示值的话，那么就可以采用defaultValue

7） checkbox的checked
checked 必须要配合 onChange事件，写成受控组件的形式
否则就采用defaultChecked

8） label的属性for ==> htmlFor

9. jsx的注释 ===> {/* jsx代码 */}

10） jsx的原理 ? jsx ==> babel编译（React.createElement） ===> js内存对象（virtual dom) ===>
ReactDOM.render() 将虚拟dom渲染成真实dom元素