03-JSX的语法规则

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 = (
   <h1 id={id}>
     <span>{data}</span>
   </h1>
)

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

执行后的HTML结果如下：

<div id="root"> <!-- react容器 -->
    <h1 id="title"> <!-- 使用JS变量指定的id -->
        <span>hello react</span><!-- 使用JS变量指定的标签内容 -->
    </h1>
</div>

3. className属性

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

<style>
  .title {
    color: aquamarine;
  }
</style>
<script type="text/babel">
  const data = 'hello react'
  const id = 'title'

  const VDOM = (
     <h1 id={id} className='title'><!-- className指明类名 -->
        <span>{data}</span>
      </h1>
  )

   // 2. 渲染虚拟DOM
  ReactDOM.render(VDOM, document.getElementById('root'))
 </script>

4. 内联样式

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

<script type="text/babel">
   const data = 'hello react'
   const id = 'title'

   const VDOM = (
      <h1 id={id} >
        <span style={
   
   { color: 'aquamarine',fontsize:'30px' }}>{data}</span>
      </h1>
    )

// 2. 渲染虚拟DOM
  ReactDOM.render(VDOM, document.getElementById('root'))
</script>

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

5. 根标签只能有一个

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

const VDOM = (
  // 直接创建两个同层级的标签是错误的
  // <h1>第一个标签</h1>
  // <h1>第二个标签</h1>  
  <div> //外侧包裹一层标签
    <h1>第一个标签</h1>
    <h1>第二个标签</h1>
  </div>
)

6. 所有标签必须闭合

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

在HTML中合法的<input type='text'>是不符合JSX语法的，必须自结束<input type='text' />

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

7. 标签的大小写

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

<xiaoming></xiaoming> //报没有对应标签错误
<Xiaoming></Xiaoming> //报没有对应的组件错误（如果没有定义的话）