vue3 优雅的在 jsx 中使用动态组件 component

想必用 vue 撸过后台的同学们都有经历过，侧边导航栏结合 vue-router 的无限层级渲染。
但是 vue3 所推崇的按需引入加上 element-plus 的 icon 组件变化。
使得我们在渲染的时候需要用到动态组件。

内置组件 component

在 jsx 中没有办法正常渲染，有成功的同学可以留下代码讨论下。

resolveComponent 与 h 结合使用

成功渲染，代码如下：

import { defineComponent, resolveComponent, h } from "vue";
import { HomeFilled, Lock } from "@element-plus/icons-vue";

export default defineComponent({
  name: "OverrideItem",
  components: {
    HomeFilled,
    Lock,
  },
  render（）{
  	...
  	<el-icon size={14}>
     {this.route.meta?.icon &&
       h(resolveComponent(this.route.meta.icon))}
   	</el-icon>
    ...      
  }
})

简单总结下：

1. jsx 中需要使用 resolveComponent 函数去访问组件，组件的name就是入参。
2. 访问成功之后，再使用 h 渲染函数将其渲染出来。
3. 需要注意，要渲染的组件必须在 components 中声明，否则一样无效。