Блог

Главная - Вопросы по программированию - Динамический html-элемент как компонент

Динамический html-элемент как компонент

#svelte

Вопрос:

Я хочу создать компонент заголовка в svelte, где я могу указать, какой из h1-h6 я хочу использовать в качестве компонента. То есть

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

Однако первый не распознает, что h2 есть, а второй, похоже, просто сводится к длинному утверждению «если бы», которое мне не нравится. Есть ли какой-нибудь простой способ реализовать подобные вещи?

Фактический компонент сложнее, чем простая оболочка вокруг h1-h6, поэтому я не могу просто использовать h1-h6 как есть или использовать слот, так как я хочу добавить атрибуты к компоненту h1-h6, например идентификатор. Я попытался использовать компонент svelte:, но, опять же, svelte распознает не только h1.

Есть ли простое решение этой проблемы, или я просто выполняю длинный блок «если-еще»?

Комментарии:

1. Для этого пока нет ничего простого. Следите за этим вопросом, когда станут доступны динамические элементы: github.com/sveltejs/svelte/issues/2324 Ожидающий пиар: github.com/sveltejs/svelte/pull/5481

2. Спасибо, приятно знать, что на этом фронте есть некоторый прогресс

Ответ №1:

Хотя на самом деле это еще невозможно в стройном (см. https://github.com/sveltejs/svelte/issues/2324), существует простой обходной путь, который использует встроенную {@html} функцию.

Приложение.стройная

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

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

Заголовок.стройная

 <script>
    export let headerType;
</script>

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

Без использования строк операторов if это, по-видимому, единственный способ, которым это может быть реализовано должным образом.

Посмотреть на Стройный РЕПЛ можно здесь.

Метки: