JSX语法

一、JSX的语法规则

1、创建虚拟DOM不能使用""双引号。

//错误方式
const VDOM = (
            "<h1><span>我是标题1</span></h1>"
        );

//正确方式
const VDOM1 = (
            <h1>
                <span>我是标题1</span>
            </h1>
        )

2、标签中混入JS表达式时要使用{}大括号

const myId = 'MyId';
        const mySpan = 'MySpan';
        const message = "我是内容";
        const VDOM2 = (
            <h1 id = {myId.toLocaleLowerCase}>
                <span id = {mySpan.toLocaleLowerCase}>{message}</span>
                </h1>
        )

3、样式的类名不要使用class， 要使用className

<style>
    .title {
        background-color: pink;
    }
</style>


//样式的类名不要使用class,要用className
const VDOM3 = (
    <h1 className = 'title'>
        <span>{message}</span>
    </h1>
        )

4、内联样式要使用style:{{key:value}}的格式编写

const VDOM4 = (
      <h1 className = 'title'>
          <span style = {{color:'white',fontSize:"100px"}}>{message}</span>
      </h1>
        )

5、虚拟DOM只能允许存在一个根节点

6、标签必须闭合

7、标签首字母

• 若标签小写字母开头，默认将会转为html中对应名称的标签，若html中无同名的标签，则报错。

• 若标签大写字母开头，React将会去渲染对应的组件，若没有定义，则报错。

二、js表达式与js语句（代码）的区别

在虚拟DOM中只能允许编写js表达式

1、js表达式

有返回值的，或是产生一个值的称之为表达式。

例如：

a、a+b、arr.map()、function test()...

2、js语句（代码）

判断是否能执行，或者能执行多少次等代码都称之为js语句

例如：

if（）{}

switch（）{}

...