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

Question

解析组件失败：组件如果这是本机自定义元素，请确保通过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>

Answer 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[*******];