借助babel理解jsx

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,