每天学点React - JSX的语法规则持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

JSX说明

JSX，全称为JavaScript XML
它是React定义的一种类似于XML的JS扩展语法：JS + XML
本质是React.createElement(component, props, ...children)方法的语法糖
用来简化创建虚拟DOM

语法规则

1. 定义虚拟DOM时，不要加单引号/双引号

<script type="text/babel">
    // 定义虚拟DOM
    const VDOM = (
        <h2 id='body_h2'>
            <span>JSX的语法规则</span>
        </h2>
    )

    // 渲染到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

</script>

2. 当标签需要引入变量时，要写在大括号`{}`中

<script type="text/babel">
    // 变量定义
    const id = 'body_h2'
    const spanContent = 'JSX的语法规则'

    // 定义虚拟DOM
    const VDOM = (
        <h2 id={id}>
            <span>{spanContent}</span>
        </h2>
    )

    // 渲染到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

</script>

3. 样式的类名制定不推荐用`class`,要用`className`

<style>
    .title {
        background-color: blue;
        size: 200px;
    }
</style>
<script type="text/babel">
    // 变量定义
    const id = 'body_h2'
    const spanContent = 'JSX的语法规则'

    // 定义虚拟DOM
    const VDOM = (
        <h2 class='title' id={id}>
            <span>{spanContent}</span>
        </h2>
    )

    // 渲染到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

</script>

使用class的话在控制台可以看到一个警告，给出了提示采用className。

<style>
    .title {
        background-color: blue;
        size: 200px;
    }
</style>
<script type="text/babel">
    // 变量定义
    const id = 'body_h2'
    const spanContent = 'JSX的语法规则'

    // 定义虚拟DOM
    const VDOM = (
        <h2 class='title' id={id}>
            <span>{spanContent}</span>
        </h2>
    )

    // 渲染到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

</script>

4. 内联样式要用{{键:值}}的形式写

<script type="text/babel">
    // 变量定义
    const id = 'body_h2'
    const spanContent = 'JSX的语法规则'

    // 定义虚拟DOM
    const VDOM = (
        <h2 className='title' id={id}>
            <span style='margin-left: 100px'>{spanContent}</span>
        </h2>
    )

    // 渲染到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

</script>

在效果图中可以看到，我们定义了style属性之后，浏览器报错了，页面并没有渲染出来。它给出的提示意思是，style属性需要从样式属性到值到映射，而不是字符串。还有一个参考案例：style={{marginRight:spacing+'em'}}。

我们改成这样看一下具体效果如何:

    <script type="text/babel">
        // 变量定义
        const id = 'body_h2'
        const spanContent = 'JSX的语法规则'

        // 定义虚拟DOM
        const VDOM = (
            // <h2 class='title' id={id}>
            <h2 className='title' id={id}>
                <span style='margin-left: 100px'>{spanContent}</span>
            </h2>
        )

        // 渲染到页面
        ReactDOM.render(VDOM, document.getElementById('test'))

    </script>

改成键值对的形式之后就没有报错，可以正常渲染效果了。

5. 虚拟DOM必须只有一个根标签

当我们需要定义多个标签时，如果直接在虚拟DOM中定义，编译器会给出错误的提示：

6. 标签必须闭合

7. 标签转化

当定义当标签为小写字母开头的，会将其转化为HTML的标签，如无该标签，则会报错。

<script type="text/babel">
    // 变量定义
    const id = 'body_h2'
    const spanContent = 'JSX的语法规则'

    // 定义虚拟DOM
    const VDOM = (
        <div>
            <myComponent>标签</myComponent>
        </div>
    )

    // 渲染到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

</script>

当定义当标签首字母为大写时，则会渲染对应当自定义组件，如没有该组件，则报错。

<script type="text/babel">
    // 变量定义
    const id = 'body_h2'
    const spanContent = 'JSX的语法规则'

    // 定义虚拟DOM
    const VDOM = (
        <div>
            <MyComponent>标签</MyComponent>
        </div>
    )

    // 渲染到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

</script>

每天学点React - JSX的语法规则