动态 html 元素作为组件

Question

我想在 svelte 中创建一个 header 组件，我可以在其中指定我想要的 h1 到 h6 中的哪一个作为组件。即

<HeaderComponent component={h2} />
// or
<HeaderComponent kind="4" /> // for h4

然而，第一个不认识 h2 是什么，第二个似乎只是归结为一个长长的 if-else 声明，我不喜欢。有什么简单的方法可以实现这种事情吗？

实际组件比 h1-h6 的简单包装更复杂，所以我不能直接使用 h1-h6 或使用插槽，因为我想向 h1-h6 组件添加属性像一个身份证。我尝试使用 svelte:component，但同样，svelte 不能只识别 h1。

这个问题有没有简单的解决方案，或者我只是做一个长 if-else 块？

Answer 1

虽然在 Svelte 中实际上还不可能（参见 https://github.com/sveltejs/svelte/issues/2324），但有一个简单的解决方法，它使用内置的 {@html} 函数。

App.svelte

<script>
    import Header from "./Header.svelte";
</script>

<main>
      <Header headerType="h1" />
</main>

Header.svelte

<script>
    export let headerType;
</script>

{@html `<${headerType}>Hello, World!</${headerType}>`}

如果不使用 if 语句字符串，这似乎是唯一可以正确实现的方法。

查看 Svelte REPL here。

Dynamic html element as component