jsx的官方定义是类XML语法的ECMAScript扩展。下面用不同的维度来描述
- XML基本语法
使用XML语法的好处是标签可以任意嵌套,可以像html一样清晰地看到DOM树状结构及其属性,比如构造一个LIST组件:
** 定义标签时,只允许被一个标签包裹。因为一个标签会被转译成对应的React.createElement调用方法,最外层没有被包裹,显然无法转译成方法调用。
** 标签一定要闭合。所有标签都必须要闭合,否则无法编译通过。其中在html中的自闭合的标签(如<img>)在jsx中也遵循同样的规则,自定义标签可以根据是否有子组件或者文本来决定闭合方式。
- 元素类型
DOM元素和组件元素。在JSX里面自然会有对应,对应规则是是HTML标签首字母是否为小写字母,其中小写首字母对应DOM元素,而组件元素自然对应大写首字母。
- 元素属性
元素除了标签之外,另外一个组成部分就是标签的属性。在JSX中,不论是DOM元素还是组件元素,它们都有属性。不同的是,DOM元素的属性是标准规范属性,但有两个例外----class 和 for ,这是因为这两个单词都是关键词,因此在使用的时候需要转化一下:
** class 属性改为 className.
** for 属性改为htmlFor
而组件元素的属性是完全自定义的属性,也可以理解为实现组件所需要的参数。
jsx -> js xml 可扩展的js语法
-- class必须写成className
--标签必须是闭合状态 包括单标签<input />
--如果元素属性是一个变量需要花括号 src={ obj.xxx }