vue3 如何在 jsx中使用 component 组件

component 组件不像其它的内置组件(tansition、transitionGroup),可以直接从 vue 中直接导出，所有要在 jsx 使用component就要使用 h 函数

使用 vue 内置组件

// xxx.jsx
import { defineComponent, Transition } from 'vue';

export default defineComponent({
    name: "v-test",
    setup(props, { attrs, slots }){
        return () => <Transition><div>{ slots.default?.() }</div></Transition>
    }
})

使用动态组件-component

// xxx.jsx
import { defineComponent } from 'vue';

export default defineComponent({
    name: "v-test",
    props:{
        tag: {
            type: String,
            default: "div",
        }
    },
    setup(props, { attrs, slots }){
        return () => h(props.tag, {...attrs}, slots.default?.())
    }
})