React基础教程(三):JSX语法
1、JSX简介
- 全称:JavaScript XML
- react定义的一种类似于XML的JS扩展语法:JS+XML
- 本质是
React.createElement(component, props, ...children)
方法的语法糖 - 作用:用来简化创建虚拟DOM(
注意:
它不是字符串,也不是HTML/XML标签;它最终产生的就是一个JS对象) - 标签名任意:HTML标签或其他标签
2、JSX语法规则
- 定义虚拟DOM的时候不要写引号
- 标签中混入JS表达式时要用
{}
- 样式的类名指定不要用
class
,要用className
- 内联样式,要用
style={ {key:value}}
的形式去写 - 虚拟DOM必须只有一个根标签
- 标签必须闭合
- 标签首字母:①若小写字母开头,则将改标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。②若大写字母开头&