JSX的语法规则

JSX是React为了方便创建虚拟DOM创建的一门新语言，语法类似于HTML，但是稍有区别。

1. JSX基本信息

JSX全称JavaScript XML，一种类似于XML的JS扩展语法（JS+XML）。

其本质是React.createElement(component,props,...children)方法的语法糖。

2. JS表达式

JSX中可以使用JS原生的表达式，例如在JSX语句中插入JS变量：

const data = 'hello react'
const id = 'title'

const VDOM = (
   

     {data}
   
)
1
2
3
4
5
6
7
8

上例中使用{ }包裹JS表达式（这里式变量）实现在JSX中插入JS变量。

执行后的HTML结果如下：

<div id="root"> 
    <h1 id="title"> 
        <span>hello reactspan>
    h1>
div>
1
2
3
4
5

3. className属性

在JSX中不能直接使用class指定标签的属性名，必须使用className：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4. 内联样式

如果需要直接在标签上添加样式，需要使用style={{ ... }}语法：

1
2
3
4
5
6
7
8
9
10
11
12
13

注意： 此处的双花括号{{ ... }}并不是一体的，外侧花括号表示内部是一个JS表达式，内测花括号表示是一个对象，所以style实际上接收的是一个JS对象。

5. 根标签只能有一个

如果存在多个并列的标签，需要在外侧添加一个新的标签包裹。

const VDOM = (
  // 直接创建两个同层级的标签是错误的
  // 
第一个标签
  // 
第二个标签
  
  
 //外侧包裹一层标签
    
第一个标签
    
第二个标签
  
)
1
2
3
4
5
6
7
8
9

6. 所有标签必须闭合

在React中，所有的标签必须闭合，如果一个标签没有结束标签，可以使用自结束。

在HTML中合法的是不符合JSX语法的，必须自结束

<input /> //标签必须自结束
<div>div>
1
2

7. 标签的大小写

如果一个标签的 首字母是小写的，JSX会转为对应的HTML标签，如果首字母是大写字母，JSX会认为这个标签是一个React对象。

 //报没有对应标签错误
 //报没有对应的组件错误（如果没有定义的话）
1
2