Как установить тег Dynami c html в соответствии с реквизитом в Svelte - PullRequest
Новая
       7

Как установить тег Dynami c html в соответствии с реквизитом в Svelte

0 голосов
/ 19 апреля 2020

Я создаю Heading компонент в svelte как часть изучения основ этого фреймворка. Поведение компонента довольно простое.

Компонент будет иметь опору с именем level, которая будет соответственно отображать соответствующий тег <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 ?

1 Ответ

0 голосов
/ 19 апреля 2020

Попробуйте это: 

<script>
export let level = 3;
let displayText = "<h" + level + ">" +
                    "Sample header text" +
                  "</h" + level + ">";
</script>

<main>
    <div>
        {@html displayText}
    </div>
</main>

Вы можете построить свой html как строку, объединив значение уровня в тег, а затем отобразить его с помощью переменной-аннотации "@ html", которая интерпретирует вашу строку как html, а не как простой текст.

...