vue的jsx写法中如何使用component动态组件?

Question

已知vue的template语法中，动态组件是这么写的

<component v-bind:is="currentTabComponent"></component>

换成jsx写法

 <component is={this.currentTabComponent} ></component>

这样似乎行不通，运行会报错：

Unknown custom element: <component> - did you register the component correctly……

完整代码如下：

import { Component, Vue } from "vue-property-decorator";
import utab from '@/components/utab.vue';
import style from './index.module.scss';
@Component({
    components: {
        apply: () => import('./apply/index.vue'),
        scale: () => import('./scale/index.vue'),
        hazard: () => import('./hazard/index.vue'),
        desktop: () => import('./desktop/index.vue'),
        utab
    }
})
export default class ManageIndex extends Vue {
    //#region data
    currentTabComponent = 'apply';
    tabs: Views.VTabItem[] = [
        { label: 'VTE系统开通', value: 'apply' },
        { label: 'VTE量表维护', value: 'scale' },
        { label: 'VTE风险因素', value: 'hazard' },
        { label: '医护端管理', value: 'desktop' }
    ];

    //#endregion data
    render() {
        return (
            <div class={style['systemopt-cont']}>
                <utab tabs={this.tabs} v-model={this.currentTabComponent} />
                <keep-alive>
                    <component is={this.currentTabComponent} class={style.routerview} />
                </keep-alive>
            </div>
        );
    }
}

Answer 1

可以使用计算属性返回动态组件

{
    computed: {
        component () {
           if (!this.componentName) { return null }
           const Tag = this.componentName
           return <Tag></Tag>
        }
    },
    render() {
        return <div class="warp">{this.component}</div>
    }
}