Блог

Главная - Вопросы по программированию - Можете ли вы добавить необязательные теги _outer_ в условный оператор svelte?

Можете ли вы добавить необязательные теги _outer_ в условный оператор svelte?

#svelte

#svelte

Вопрос:

Можно ли использовать условный оператор для обертывания внутреннего содержимого необязательным внешним элементом?

Вот пример того, что я хочу сделать в действительном Svelte:

 <script>
  export let needs_div_wrapper;
</script>

{#if needs_div_wrapper}
  <div>
    <a>My static content!</a>
  </div>
{:else}
  <a>My static content!</a>
{/if}

И вот пример в недопустимом Svelte, который демонстрирует, что я хочу сделать:

 ...

{#if needs_div_wrapper}
  <div>
{/if}
    <a>My static content!</a>
{#if needs_div_wrapper}
  </div>
{:else}

РЕДАКТИРОВАТЬ: просто для ясности, я пытаюсь выполнить это без нового компонента для внутреннего содержимого.

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

1. Я бы тоже хотел что-то подобное. Я создал проблему на Svelte GitHub: github.com/sveltejs/svelte/issues/7528

Ответ №1:

Нет, это невозможно.

Компонент-оболочка, вероятно, является самым чистым, что вы можете сделать в этом случае, чтобы избежать повторения потенциально нетривиальной разметки в «родительском» компоненте.

Насколько я понимаю, вы уже нашли это решение, но для справки вот что я имею в виду:

DivWrapper.svelte 

 <script>
  export let wrap = false
</script>
{#if wrap}
  <div {...$restProps}>
    <slot />
  </div>
{:else}
  <slot />
{/if}

App.svelte 

 <script>
  import DivWrapper from './DivWrapper.svelte'

  export let needs_div_wrapper;
</script>

<DivWrapper wrap={needs_div_wrapper}>
  <a>My static content!</a>
</DivWrapper>
Метки: