jsx的语法

1.定义

写在js文件中的html格式的语言
jsx比html严格多了，每个元素必须要有闭合

2.定义虚拟DOM对象

直接使用html标签就可以定义虚拟DOM对象
必须用唯一的根元素来进行包裹

var div=<div>123456</div>

3.插值表达式{}

插值表达式内可以写数字，字符串，boolean值
当需要在jsx控制的区域内引用js中的对象时，就需要使用{}

var aa=111
var div=<div>{aaa}</div>

4.将字符串数组转换为jsx数组

1. foreach循环遍历

var arrStr=['1','2']
var arr=[]
arrStr.forEach(i=>{
var temp=<div>{i}</div>
arr.push(temp)
})

2. map循环遍历

var arrStr=['1','2']
var arr=arrStr.map(i=>{
return <div>{i}</div>
})
//或者直接在虚拟DOM对象中写
var div=<div>{arrStr.map(i=>{
return <div>{i}</div>})}</div>
//简写
var div=<div>arrStr.map((i,index)=><div key={index}>{i}</div>)

在react中，key值要加在被循环直接控制的元素中，就是加在最外层的元素中
key值得作用参考Vue中的一些指令中v-for的key值作用

5.注释

在定义虚拟DOM对象中如何写注释
单行注释

var div=<div>
//
</div>

多行注释

var div=<div>/**/</div>

推荐使用多行注释

6.一些替换

1. class
   因为class是js中的关键字，为了防止歧义，使用className来代替

var div=<div className="myclass"></div>

2. label中的for属性
   因为js中存在for循环，for也是js的关键字，为了防止歧义，使用htmlFor来代替

var label=<label htmlFor=""></label>