JSX语法注意点
- 如要要使用
JSX
(符合XML
规范的JS
语法) 语法,必须先运行cnpm i babel-preset-react -D
,然后再.babelrc
中添加 语法配置(在presets
中加入一个"react
"); JSX
语法的本质:JSX
内部在运行的时候,也是先把 类似与HTML
这样的标签代码转换为React.createElement
的形式来实现的,并没有直接把 用户写的HTML
代码,渲染到页面上;- 如果要在
JSX
语法内部,书写JS
代码,那么,所有的JS
代码,必须写到{}
内部; - 当 编译引擎,在编译
JSX
代码的时候,如果遇到了<
(尖括号)那么就把它当作HTML
代码去编译,如果遇到了{}
(大括号)就把 花括号内部的代码当作 普通JS
代码去编译; - 在
{}
内部,可以写任何符合JS
规范的代码; - 在
JSX
中,如果要为元素添加class
属性了,那么,必须写成className
,因为class
在ES6
中是一个关键字;和class
类似,label
标签的for
属性需要替换为htmlFor
. - 在
JSX
创建DOM
的时候,所有的节点,必须有唯一的根元素进行包裹; - 如果要写注释了,注释必须放到
{}
内部(在{}
中的注释最好是使用/**/的形式
)