Svelte中能否遍历导入组件？我的循环代码为何无法显示组件

你的代码存在两个关键问题导致组件无法正常显示：

1. 动态组件渲染语法错误 #

Svelte 不支持直接用 <component /> 这种方式渲染动态组件，必须使用官方提供的 <svelte:component> 特殊元素，通过 this 属性绑定要渲染的组件实例。

2. 数组创建写法冗余（非致命但不规范） #

Array(Component1, Component2, Component3) 虽然能生成目标数组，但更推荐使用简洁的数组字面量语法 [Component1, Component2, Component3]。

修正后的基础代码 #

<script>
  import Component1 from "./lib/components/Component1.svelte";
  import Component2 from "./lib/components/Component2.svelte";
  import Component3 from "./lib/components/Component3.svelte";
  let components = [Component1, Component2, Component3];
</script>

<main>
  <div id="main-wrapper">
    {#each components as component}
      <svelte:component this={component} />
    {/each}
  </div>
</main>

<style>
</style>

进阶：自动批量导入组件 #

如果想避免手动逐个导入组件，可以借助 Vite 的 import.meta.glob 功能实现文件夹组件批量导入：

<script>
  // 匹配components文件夹下所有.svelte文件，默认懒加载
  const componentModules = import.meta.glob('./lib/components/*.svelte');
  let components = [];

  // 加载所有组件并转为实例数组
  async function loadComponents() {
    components = await Promise.all(
      Object.values(componentModules).map(module => module())
    ).then(modules => modules.map(mod => mod.default));
  }

  loadComponents();
</script>

<main>
  <div id="main-wrapper">
    {#each components as component}
      <svelte:component this={component} />
    {/each}
  </div>
</main>

<style>
</style>

若需要同步加载（不推荐，会增大初始打包体积），可改用 import.meta.globEager：

<script>
  const componentModules = import.meta.globEager('./lib/components/*.svelte');
  let components = Object.values(componentModules).map(mod => mod.default);
</script>

内容的提问来源于stack exchange，提问作者bolino