在vue3的渲染函数中使用自定义组件

起因是这样的：
我要在导航菜单中使用element-plus的图标，图标是通过router来配置的：

      {
        path: 'index',
        name: 'log',
        component: () => import('@/views/log/index'),
        meta: { title: '备份日志', icon: 'document', perm: 'logs' }
      }

生成菜单的时候，需要根据icon的值来生成图标。按照element-plus的一般使用方法，图标名称是作为标签来使用的，所以需要用渲染函数来生成图标的标签。

<script lang="jsx">
import { h, resolveComponent } from 'vue'

const MenuIcon = {
  name: 'MenuIcon',
  props: {
    icon: {
      type: String,
      default: ''
    }
  },
  render(props) {
    return <el-icon>
       {h(resolveComponent(icon))}
    </el-icon>
  }
}

export default {
  components: { MenuIcon },
  ...
}

这儿主要有两点：

1. h的第一个参数，其实除了字符串外，还可以是一个组件、一个异步组件、或 一个函数式组件
2. 要使用vue的resolveComponent方法。
   使用时，就可以如下：

<menu-icon :icon="item.meta && item.meta.icon" />