关于element的标签页el-tabs和el-tab-pane不在一起写便无法正确渲染的记录

起因

有这么一个需求，将如下json转换为组件渲染出来

[{
 "tag": "el-tabs",
 "props": {},
 "childrens": [{
  "tag": "el-tab-pane",
  "props": {
   "label": {
    "default": "标题",
    "sourceDefault": ""
   },
   "name": {
    "default": "first",
    "sourceDefault": ""
   }
  },
  "childrens": []
 }]
}]

因为childrens可能有无数层，所以这里涉及到递归，最开始用vue的模板来写类似于这种

    <component  :is="json.tag" >
        <index></index>
    </component>

发现无法正确将组件渲染出来

后来经过群里小伙伴的提醒，用jsx来写，类似于这种

    const Test2 = () => {
      return (
        <el-tab-pane label="User" name="first">
          User
        </el-tab-pane>
      );
    };
    const Test1 = () => {
      return (
        <>
          <el-tabs>
            <Test2></Test2>
          </el-tabs>
        </>
      );
    };

也是无法正确渲染dom

然后采用了vue的h函数，类似于这种

    const Test3 = () => {
      const TestTabPanel = resolveComponent("el-tab-pane");
      return (
        <>
        {h(TestTabPanel, { label: "User", name: "first" }, () => "测试")}
        </>
      );
    };
    const Test4 = () => {
      const TestTabs = resolveComponent("el-tabs");
      return h(TestTabs, {}, () => Test3());
    };

dom渲染就正常了，很奇怪，然后我发现用jsx对比h函数在调用那里调用的不是函数，而是标签，然后我又吧jsx改成了函数调用

    const Test2 = () => {
      return (
        <el-tab-pane label="User" name="first">
          User
        </el-tab-pane>
      );
    };
    const Test1 = () => {
      return (
        <>
          <el-tabs>
            {Test2()}{/*这里改成了函数调用*/}
          </el-tabs>
        </>
      );
    };

发现dom可以正确渲染了

总结

虽然不清楚真正的原理，不过我猜测对于像element标签页这种的组件，多层必须同时渲染才可以，然后函数方式调用的优先级要高于标签方式的调用，也有可能涉及到组件生命周期的问题，先记录一下，以后有时间在着重测试一下