如何从字符串渲染Svelte组件？

{@html}指令只能渲染原生HTML内容，无法识别Svelte组件语法，所以你的尝试不会生效。下面提供两种可行方案：

方案1：拆分组件信息使用动态组件（推荐） #

如果可以将字符串中的组件、props和插槽内容拆分出来，直接用Svelte内置的<svelte:component>实现动态渲染，这是最轻量化且性能最优的方式：

<script>
  import Heading from '../components/Heading.svelte';
  // 从目标字符串拆分出组件实例、props和插槽内容
  const targetComponent = Heading;
  const componentProps = { level: 1 };
  const slotContent = 'This is a title';
</script>

<main class="rpc-doc-container">
  <svelte:component this={targetComponent} {...componentProps}>
    {slotContent}
  </svelte:component>
</main>

方案2：客户端编译字符串（仅在必须处理完整字符串时使用） #

如果必须从完整的组件字符串进行渲染，需要借助Svelte编译器在客户端动态编译代码，但此方式会增加包体积，不推荐在生产环境大量使用：

<script>
  import { compile } from 'svelte/compiler';
  import Heading from '../components/Heading.svelte';

  const headingString = '<Heading level={1}>This is a title</Heading>';
  
  // 编译组件字符串
  const compileResult = compile(headingString, {
    generate: 'dom',
    format: 'esm',
    filename: 'dynamic-heading.svelte'
  });

  // 构建模块环境，处理组件依赖
  const moduleExports = {};
  const requireMock = (path) => {
    if (path === '../components/Heading.svelte') return Heading;
    throw new Error(`无法识别模块路径：${path}`);
  };

  // 执行编译后的代码并获取组件
  const executeCode = new Function(
    'require', 'exports',
    `import Heading from '../components/Heading.svelte';\n${compileResult.js.code}`
  );
  executeCode(requireMock, moduleExports);

  const DynamicHeading = moduleExports.default;
</script>

<main class="rpc-doc-container">
  <svelte:component this={DynamicHeading} />
</main>

注意事项 #

• 方案2需要确保你的项目已安装svelte依赖（npm install svelte）。
• 生产环境优先选择方案1，避免客户端编译带来的性能和体积开销。

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