如何在Svelte/Sapper中动态导入并渲染组件？

嘿，我明白你现在用一堆if-else来渲染图标组件的痛点——维护起来太麻烦了，新增图标还要加一堆判断。这里有两种更优雅的方案，帮你实现动态渲染：

方案1：按需动态加载（适合图标数量多、想优化打包体积的场景） #

这种方式会在需要的时候才加载对应图标组件，打包工具会自动把每个图标拆成独立的代码块，提升首屏加载性能。

<script>
  import { onMount } from 'svelte';

  // 接收外部传入的IconID属性
  export let IconID;
  // 存储动态加载后的图标组件
  let IconComponent = null;

  // 建立IconID和组件路径的映射表，新增图标只需要在这里加一行
  const iconMap = {
    A: './icons/A.html',
    B: './icons/B.html',
    C: './icons/C.html',
    D: './icons/D.html'
  };

  // 动态加载组件的函数
  async function loadTargetIcon() {
    const targetPath = iconMap[IconID];
    if (targetPath) {
      // 动态导入组件模块
      const module = await import(targetPath);
      IconComponent = module.default;
    } else {
      // 如果没有匹配的IconID，可以设置一个默认图标或者置空
      IconComponent = null;
      // 可选：控制台提示错误
      console.warn(`No icon found for ID: ${IconID}`);
    }
  }

  // 组件挂载时加载初始图标
  onMount(loadTargetIcon);
  // 响应式监听IconID变化，自动切换图标
  $: if (IconID) loadTargetIcon();
</script>

<!-- 动态渲染组件 -->
{#if IconComponent}
  <svelte:component this={IconComponent} />
{/if}

方案2：预加载所有图标（适合图标数量少、追求简单的场景） #

如果你的图标数量不多，提前把所有图标都导入，然后通过映射表直接匹配，代码更简洁，不需要处理异步加载的状态：

<script>
  export let IconID;

  // 提前导入所有图标组件
  import A from './icons/A.html';
  import B from './icons/B.html';
  import C from './icons/C.html';
  import D from './icons/D.html';

  // 建立IconID和组件的映射表
  const iconMap = {
    A,
    B,
    C,
    D
  };

  // 响应式匹配组件，IconID变化时自动更新
  $: IconComponent = iconMap[IconID] ?? null;
</script>

{#if IconComponent}
  <svelte:component this={IconComponent} />
{/if}

额外小贴士 #

• 确保传入的IconID和映射表中的键大小写完全匹配，避免匹配失败
• 可以给未匹配到的情况添加一个默认图标组件，比如iconMap.default = DefaultIcon，然后用IconComponent = iconMap[IconID] ?? iconMap.default，提升容错性
• 如果是其他框架（比如Vue），思路完全一致，只是渲染动态组件的语法变成<component :is="IconComponent" />，动态导入的逻辑也类似

内容的提问来源于stack exchange，提问作者Jonas K.