JSX的语法规则JSX的语法规则 JSX全称为JavaScript XML，是react定义的一种类似于XML的JS扩展

JSX的语法规则

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

⭐创建虚拟DOM

语法：var ele=<h1>Hello JSX!</h1>;//注意这里的<h1>Hello JSX!</h1>既不是字符串，也不是HTML/XML标签

例：创建一个h1标签，id为VDOM，内容为Hello React

const VDOM = <h1 id="vdom">Hello,React</h1>

注意值不要写引号，因为那不是字符串

如果想通过变量的方式引入内容，需要用花括号：

const myId = 'vdom';
const myContent = 'Hello,React'
const VDOM = <h1 id={ myId }>{ myContent }</h1>

在花括号内还可以进行各种操作（表达式）：

const VDOM = <h1 id={myId}>{ myContent.toLowerCase() }</h1>

⭐为你的虚拟DOM添加样式

非内联样式

我们可以直接通过为VDOM传入对应的id或class来修改其样式：

<head>
    <style>
        #vdom{
            background: black;
        }
    </style>
</head>
<body>
    <script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = <h1 id="vdom">Hello,React</h1> //这里不写引号，因为值不是字符串
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'));
    </script>
</body>

注意：如果是为其指定class，则需要写成如下形式：

const VDOM = <h1 className="vdom">Hello,React</h1>

内联样式

如果你想为你的虚拟DOM添加内联样式，那么就要注意了，不能直接写style="..." ，这里不能为style直接传入字符串

那要怎么写呢？答：{{}}

双花括号，最外层代表里面是js代码，最内层代表一个对象

写出来：

const VDOM = <h1 style={{color:'white',fontSize:'20px'}}>Hello,React</h1>

⭐多个DOM的写法

上面例子中我们只写了一个h1标签，但实际中的结构会复杂很多，如果你这样写就会报错：

const VDOM = (
    <p>
        <span>Hello React</span>
    </p>
    <p>
        <span>Hello React Again</span>
    </p>
    
)

为什么呢？

因为规定一个VDOM中只能有一个根标签，这里两个p标签都在外层，是同级的，也就有了两个根标签，解决方案也很简单，用一个容器包裹两个p：

const VDOM = (
    <div>
        <p>
            <span>Hello React</span>
        </p>
        <p>
            <span>Hello React Again</span>
        </p>
    </div>
)

这样就保证了只存在一个根标签👆