React: JSX

概述

JSX全称为 JavaScript XML，它是由react定义的一种类似于XML的JS扩展语法：XML+JS，用来创建react的虚拟DOM对象。

---

基本使用

<script src="../js/babel.min.js"></script>
<script type="text/babel">
    // 创建虚拟DOM
    const VDom = "<div id="title">Hello World</div> "
    // 挂载到容器
    ReactDOM.render(VDom,document.getElementById("root"))
</script>

这里直接创建一个内容为Hello World,id为title的div标签,将其赋给VDom，这就是JSX的基本使用，需要注意的是

1.我们需要babel.min.js文件来解析它
2.script类型为babel
3.它并不是字符串，也不是HTML/XML标签
4.它最终产生的就是一个JS对象

---

基本语法规则

看似简单的JSX其实也需要遵循一些语法规则，让我们来看下，并一一解析。

• 定义虚拟DOM时，不要写引号
• 标签中混入JS表达式时要用{}
• 样式的类名指定不要用class，要哟个className
• 内联样式，要用 style={{key：value}}的形式去写
• 只有一个根标签
• 标签必须要闭合
• 标签首字母
  1.若小写字母开头，则将标签转为html中的同名元素，若html中无该标签对应的同名元素，则报错
  2.若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

1.定义虚拟DOM时，不要写引号
很容易理解，就是我们定义的虚拟DOM并不需要用引号将其包裹
如下写法就是错误的

const VDom = "<div id="title">Hello World</div>"

应该去掉引号

const VDom = <div id="title">Hello World</div>

2.标签中混入JS表达式时要用{}
有时我们想要引入一定的JS表达式，这时我们就可以通过{}包裹
如引入声明好的变量

const id="title"
// 创建虚拟DOM
const VDom =<div id={id}>Hello World</div>

3.样式的类名指定不要用class，要哟个className
为了区分类关键字class，标签类名应为className

const VDom =<div className="myclass">Hello World</div>

当然写错了也会友情提醒您：我不懂你的意思，你是在说className吗

4.内联样式，要用 style={{key：value}}的形式去写

const VDom =<div style={{color:"green",fontSize:"16px"}}>Hello World</div>

需要注意的是这里green要用引号包围，不然会被解析为变量未找到。
如果是像字体大小、背景颜色这种组合词的话需要用小驼峰命名法

5.只有一个根标签
也就是说我们在写的所有标签都应该被包裹在一个根标签内，如

const VDom =(
    <div id="title">
        <span>Hello World</span>
    </div>
    )

这里根标签是id为title的div标签，且只有一个根标签。

像以下多个根标签则会标错

const VDom =(
    <div id="title">
        <span>Hello World</span>
    </div>
    <p></p>
    )

报错意思就是说相邻的JSX元素应该包裹在一个封闭的标签中

但如果我们就想这样的形式，又不想再在外面添加一个总的根标签，这时我们可以用React.Fragment包裹

const VDom =(
<React.Fragment>
    <div id="title">
        <span>Hello World</span>
    </div>
    <p></p>
</React.Fragment>
)

6.标签必须要闭合
这就很容易理解了，不多赘述

7.标签首字母
1.若小写字母开头，则将标签转为html中的同名元素，若html中无该标签对应的同名元素，则报错

就是标签名的首字母若是小写，则解析时会根据标签名去html标签中对比寻找，找到则解析成对应html，不然直接报错
如以下study标签

<study></study>

2.若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
标签名首字母大写时，会将其解析为组件名，然后去组件中找，没找到则报错

<Study></Study>