标签：el const 渲染 tabs 标签 pane 组件 return

起因

有这么一个需求，将如下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标签页这种的组件，多层必须同时渲染才可以，然后函数方式调用的优先级要高于标签方式的调用，也有可能涉及到组件生命周期的问题，先记录一下，以后有时间在着重测试一下

标签：el,const,渲染,tabs,标签,pane,组件,return
来源： https://www.cnblogs.com/Hero-/p/16388867.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。