javascript - 如何根据 Svelte 中的 props 设置动态 html 标签

Question

我正在创建 Heading svelte 中的组件作为学习此框架基础知识的一部分。组件的行为非常简单。

该组件将有一个名为 level 的 Prop ，这将呈现适当的 <h>相应地标记。

例如。

<Heading level={3}> would render <h3>content</h3> 
<Heading level={1}> would render <h1>content</h1>

我目前可以通过以下方式实现这一目标，

<script>
  export let level = 3;
</script>

{#if level === 1}
  <h1>
   <slot></slot>
  </h1>
{:else if level === 2}
  <h2>
   <slot></slot>
  </h2>
{:else if level === 3}
  <h3>
   <slot></slot>
  </h3>
{:else if level === 4}
  <h4>
   <slot></slot>
  </h4>
{:else if level === 5}
  <h5>
   <slot></slot>
  </h5>
{/if}

但这种感觉是一种非常幼稚的做法。
在 svelte ? 中是否有更好的方法来实现此行为？

Answer 1

从 3.47.0 开始，Svelte 使用 svelte:element 对此提供了原生支持。标签。例子:

<svelte:element this="h1">this will be rendered as a top-level heading</svelte:element>

<svelte:element this={tag}>will render the element named in 'tag'</svelte:element>

<svelte:element this={null}>will not render for falsey values</svelte:element>

见 the docs或 the tutorial更多细节。