借助babel理解jsx

ゝ一世哀愁。 2022-03-16 15:14 357阅读 0赞

###### 1,打开[babel][] 输入 ######

你会看到右边的转化后的jsx是：React.createElement("div", null);是有两个参数的，第一个是字符串类型的div,第二个是这个时候是null,

###### 2,如果输入的是 ######

hello worlde!

,则右边的打印是：

React.createElement(
      "div",
      null,
      "hello worlde!"
    );
    复制代码

###### 第一个参数依旧是字符串div,第二个是null,第三个是div的内容，也可以理解为div的孩子 ######

###### 3，如果你输入的是 ######

<div>
    <div>hello worlde!</div>
    <div>hello worlde!</div>
    <span>hello worlde!</span>
    </div>
    复制代码

###### 右边的打印是 ######

React.createElement(
      "div",
      null,
          React.createElement(
            "div",
            null,
            "hello worlde!"
          ),
          React.createElement(
            "div",
            null,
            "hello worlde!"
          ),
          React.createElement(
            "span",
            null,
            "hello worlde!"
          )
    );
    复制代码

###### 可以看出当标签包含多个子节点的时候, React.createElement的第三个参数可以循环显示， ######

###### 4，如果标签有属性的时候 ######

###### 可以看出，其实jsx的参数就是三个了，第一个是标签，第二个是标签的属性，是个对象，第三个是标签的孩子， ######

###### 5，如果写成组件效果如下： ######

###### 当有组件的时候 jsx的第一个参数变成了变量，如图，参数为变量TestComponet，而不是字符串， ######

###### 6，如果组件首字母为小写的时候 效果如下 ######

###### 当组件首字母为小写的时候，jsx传递的第一个参数是字符串了，不是变量，所以这就是为什么当我们组件命名首字母不大写的时候 ，编辑的时候会报错，这可能就是jsx的一种约定吧 ######

#### 总结： ####

###### jsx的写法是React.createElement（one,two,three）,里面需要传递参数（参数一般是三个）； ######

###### 第一个参数是标签类型，如果不是自定义组件，第一个参数是字符串，字符串内存就是标签，比如div,span,text等html标签； ######

###### 第二个参数是属性，就是这个标签体或者组件的属性，这是个对象，如果没有属性的时候就是null, ######

###### 第三个是孩子，当是文本内容的时候就直接是个字符串或者是传递的变量，如果有多个孩子节点的时候，那么就是一个新的jsx的嵌套，格式一样，所以可以判断参数的个数知道这个节点有多少个子节点，如果没有子节点第三个参数就是null, ######