vue3，如何在 tsx 中使用动态组件

【问题标题】：vue3, How to use dynamic component in tsxvue3，如何在 tsx 中使用动态组件
【发布时间】：2022-11-05 04:27:19
【问题描述】：

无法解析组件：组件如果这是本机自定义元素，请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。

<script lang="tsx">

export default defineComponent({

 setup(props) {
     return () => (
      <n-form>
        {list.value.map(item => {
          return (
            <n-form-item>
    
                <component is="*****" ></component>

            </n-form-item>
          );
        })}
      </n-form>
    );
}

})
</script>

【问题讨论】：

你是在导入component is="*****" 中的任何“*****”吗？如果是这样，请包括您在 sn-p 中的导入方式

标签： vue.js jsx vuejs3 tsx

【解决方案1】：

<component is="*****" ></component> 无法使用 JSX。

相反，您可以只传递组件本身

import Comp1 from "./Comp1.vue";

export default defineComponent({

  setup(props) {
    return () => (
      <n-form>
        {list.value.map(item => {
          const MyComponent = Comp1;
          return (
            <n-form-item>

                <MyComponent/>

            </n-form-item>
          );
        })}
      </n-form>
    );
  }
})

当然，使用 const MyComponent = Comp1; 并不完全是动态的，但您可以用类似的查找替换它

import Comp1 from "./Comp1.vue";
import Comp2 from "./Comp2.vue";
import Comp3 from "./Comp3.vue";
cons componentDefs = {
   "comp-1": Comp1,
   "comp-2": Comp2,
   "comp-3": Comp3,
}

然后你可以用

const MyComponent = componentDefs[*******];

【讨论】：