svelte - 在 中使用字符串作为组件名称

Question

假设我们在 Svelte 中有一个使用动态特殊标签创建的自定义组件。假设我们有一个 字符串 带有组件构造函数的名称。

<script>
    import testComponent from './Something.svelte';

    let componentConstructorName = 'testComponent';
</script>

<svelte:component this="{componentConstructorName}" />

是否可以在 this中直接解析组件构造函数名称并渲染对应的组件属性(property)？

我知道我可以创建一个对象，将构造函数引用分配给它的字符串名称，但我试图以更自动化的方式执行此操作，而无需进行任何手动分配。

以下方法可行，但使用 eval() 我确实感到有些痛苦.

<svelte:component this="{ eval(componentConstructorName) }" />

Answer 1

不，不能直接这样做，您必须以某种方式从字符串到构造函数引用。但不是 eval这不是真正推荐的，您可以使用第二个 react 性变量:

let componentContructorName = 'testComponent';
$: componentConstructorClass = 
       componentConstructorName === 'testComponent'
     ? testComponent
     : someDefaultComponent

或者用 switch 语句

let componentContructorName = 'testComponent';
$: componentConstructorClass = (() => switch(componentConstructorName) {
     case 'testComponent': return TestComponent;
     case 'testComponent2': return TestComponent2;
     default: someDefaultComponent;
})();