vue3中jsx写法实现动态组件

vue2和vue3的动态组件在模板语法中写起来很简单，但是换成jsx后，俩版本的写法有很大的差异，以下是vue3的写法示范。
vue2的jsx写法如何实现动态组件？

首先声明两个示范组件
comp1.tsx

import { defineComponent } from "vue";
export default defineComponent({
    setup() {
        return () => (
            <div>动态组件1</div>
        );
    }
});

comp2.tsx

import { defineComponent } from "vue";
export default defineComponent({
    setup() {
        return () => (
            <div>动态组件2</div>
        );
    }
});

应用动态组件
index.tsx

import { defineComponent, h, resolveComponent, defineAsyncComponent,ref } from 'vue';
export default defineComponent({
	components:{
		comp1: defineAsyncComponent(() => import('./components/comp1')),
        comp2: defineAsyncComponent(() => import('./components/comp2'))
	},
	setup(){
		let tabComponent = ref('comp1');
		return ()=>(
			<>
				<h1>动态组件示范</h1>
                <button onClick={() => tabComponent.value = 'comp1'}>comp1</button><button onClick={() => tabComponent.value = 'comp2'}>comp2</button>
                {
                    h(resolveComponent(tabComponent.value))
                }
			</>
		);
	}
})

以上就是动态组件的实现方式，
关键步骤:
1.用defineAsyncComponent声明需要动态载入的组件
2.用resolveComponent请求组件
3.用渲染函数h加载组件