在 <svelte:component> 中使用字符串作为组件名称

Question

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

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

    let componentConstructorName = 'testComponent';
</script>

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

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

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

以下内容可行，但使用时我确实感到有些痛苦eval()。

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

Answer 1

这是我的解决方案，我认为这非常 Vuey。

<script>
  import CompOne from './CompOne.svelte';
  import CompTwo from './CompTwo.svelte';
  import CompThree from './CompThree.svelte';


  const components = { CompOne, CompTwo, CompThree }
  let compConstrName = "CompOne";
</script>

<svelte:component this={components[compConstrName]} />

Answer 2

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

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;
})();