Question

想要基于对象输入数组生成组件的

我可以说：

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}

也许有一种方法可以获取所有导入组件的清单，以便我可以将字符串名称映射到组件类？

Answer 1

不，这是一个有趣的想法，但是您不能对组件进行字符串处理。一方面，当代码最小化用于生产时，变量的名称（包括来自进口的变量）很可能会丢失。

  SOURCE_QUOTA = {
    'free' => (ENV['FREE_SOURCE_QUOTA'] || '5').to_i,
    'premium' => (ENV['PREMIUM_SOURCE_QUOTA'] || '100').to_i
  }.freeze

因此，您需要维护一个字符串=>组件映射。像这样：

  describe "a thing" do
    it "does stuff" do
      ENV['FREE_SOURCE_QUOTA'] = '2'
      DataSource::SOURCE_QUOTA["free"] = ENV['FREE_SOURCE_QUOTA'].to_i
      # test code

您可以从// the Hero variable will probably become something like `a` after minify import Hero from './Hero.svelte'文件或其他内容中导出此列表，以便在使用者之间轻松共享。如果这样做，您还可以利用ES语法使代码更简洁：

import Hero from './Hero.svelte' import OtherComponent from './OtherComponent.svelte' // NOTE should survive minification 'cause object keys are strings const components = { Hero, OtherComponent, } ...

components.js

components.js

export { default as Hero } from './Hero.svelte'
export { default as OtherComponent } from './OtherComponent.svelte'

话虽如此，如果您可以完全跳过字符串映射（取决于源数据的来源/生成方式），从长远来看，您将能够获得更动态，更易于维护的功能

Consumer.svelte

基于对象创建组件

1 个答案: