vue：如何用js（h()函数VNode类型）渲染dom_html-js-css

vue版本：3.x setup语法 + ts
涉及技术：h()，VNode，vue特殊attribute is

比如有一种情况，当前dom元素下要动态获取数据的展示某种组件，也就是说js部分不仅控制展示的文字内容，还要决定展示何种component，如何实现？
具体举一个🌰：
使用naive-ui的面包屑，而icon所采用的是xicons，xicons所引入的格式并不是常见的icon组件所使用一个string字段来表示name，而是直接引入一个component即vnode格式，如下截图可以看出：
实现效果：

这是模拟的一个面包屑列表数据结构：

import { Accessibility, Alarm, AmericanFootballSharp } from "@vicons/ionicons5";

const breadcrumbList = [
    { name: "菜单1", icon: Accessibility },
    { name: "菜单2", icon: Alarm },
    { name: "菜单3", icon: AmericanFootballSharp },
];

这里只是直观的展示一个数组，当然现实情况可能是从外部文件或路由等拿到的动态数组。

这时我们的dom结构就应该是如下写出来的：

<n-breadcrumb>
    <n-breadcrumb-item v-for="item in breadcrumbList" :key="item.name">
        <n-icon>
        	
            <icon-component />
        n-icon>
        {{ item.name }}
    n-breadcrumb-item>
n-breadcrumb>

而实际icon是vnode格式：

这样直接展示是无法渲染的，就需要用到vue的特殊attribute：is属性：

<n-breadcrumb>
    <n-breadcrumb-item v-for="item in breadcrumbList" :key="item.name">
        <n-icon>
        	
            <component :is="item.icon">component>
        n-icon>
        {{ item.name }}
    n-breadcrumb-item>
n-breadcrumb>

这样就能正常渲染了

vue官方文档：特殊attribute is

同样的，各种vnode格式都可以渲染，这里再写一个h()函数的🌰：

<template>
    <component :is="testRender"></component>
</template>

<script lang="ts" setup>
import { NImage } from "naive-ui";
import { h } from "vue";

const testRender = h("div", null, [
    h(NImage, { width: 200, src: "/src/assets/cool-boy.png" }),
    h("h1", null, { default: () => "今年16岁，害怕校园暴力" }),
]);
</script>