element的el-tabs与el-tab-pane必须分写，否则渲染出错吗？

本文共计477个文字，预计阅读时间需要2分钟。

起因+有这样一个需求，将以下JSON转换为组件渲染出来：[{tag: el-tabs, props: {}, childrens: [{tag: el-tab-pane, props: {label: {default: , sourceDefault: }, name: {default: first}}}]}]

起因

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

-------------------------------------------

学而不思则罔,思而不学则殆

你好，我是

-------------------------------------------