基于svelte中的对象创建组件

我希望根据对象的输入数组生成组件，比如：

let components = [
  { Hero: { componentData: {} },
  { AnotherComponent: { componentData: {} }
]

其中，“Hero”和“AnotherComponent”是导入中使用的组件名称。 所有可能的组件都是进口的-我事先知道所有可以使用的组件，我只是不知道将使用哪些组件以及使用顺序

然后我想做下面的事情 我所知道的伪代码Object.keys（components）[0]是一个字符串，而不是组件类

{#each components as component}
  <svelte:component this={Object.keys(components)[0]} data={component.componentData} />
{/each}

{#每个组件作为组件}
{/每个}

---

也许有一种方法可以在svelte中获取所有导入组件的列表，这样我就可以将字符串名称映射到组件类？

不，这是一个有趣的想法，但您不能执行字符串到组件的操作。首先，当代码被缩小以用于生产时，变量的名称（包括来自导入的变量）很可能会丢失

//缩小后，Hero变量可能会变成类似于'a'的东西
从“/Hero.svelte”导入英雄

因此，您需要维护一个string=>组件映射。大概是这样的：

从“./Hero.svelte”导入英雄
从“./OtherComponent.svelte”导入其他组件
//注意：由于对象键是字符串，因此应在缩小后继续存在
常数分量={
英雄
其他组成部分，
}
...

您可以从

components.js

文件或其他文件导出此列表，以便在消费者之间轻松共享。如果这样做，还可以利用ES语法使代码更加简洁：

components.js

从“/Hero.svelte”导出{default as Hero}
从“./OtherComponent.svelte”导出{default as OtherComponent}

Consumer.slvelte

将*作为组件从“./components.js”导入
导出让cmp='Hero'

也就是说，如果您可以完全跳过字符串映射（取决于源数据的来源/生成方式），那么从长远来看，您可能会获得更动态、更易于维护的内容

从“/Hero.svelte”导入英雄
从“./OtherComponent.svelte”导入其他组件
常数分量=[
{component:Hero，componentData:{}，
{component:OtherComponent，componentData:{}，
]