Início / coding / Perguntas / 77729105
Accepted
Paul W
Asked: 2023-12-29 04:50:39 +0800 CST

Elemento de empacotamento condicional em Svelte

  • 772

Svelte rejeita esta sintaxe:

// conditional open link tag
{#if whatever}
  <a href="myurl">
{/if}

// 
// many lines of code for dynamic text output
//

// conditional close link tag
{#if whatever}
  </a>
{/if}

O compilador de Svelte lança: ParseError: Unexpected block closing tagno primeiro bloco condicional, porque vê a <a>sem correspondência </a>.

Esta é uma necessidade comum: algo pode precisar se tornar um hiperlink em algumas condições, mas não em outras, e o conteúdo contido é complexo demais para ser copiado e colado, de modo que aparece duas vezes. Suponho que a mesma coisa poderia surgir com qualquer outra tag html com tags de abertura e fechamento, onde se deseja adicionar condicionalmente um wrapper html em torno de algo.

Certamente alguém poderia conseguir isso criando um componente condicional para cada tipo de tag html e inserindo o código interno, ou movendo o conteúdo interno para uma função e injetando-o no DOM com {@html...}, mas essas são soluções desajeitadas para algo tão incrivelmente básico e simples.

Isso parece algo que a estrutura deveria fornecer. Existe uma maneira limpa de fazer isso?

svelte

1 respostas

  1. Best Answer

    Para este caso específico a solução é simples: basta usar sempre<a> an e tornar a hrefcondicional (uma string ou undefined). An não<a> é um link, a menos que realmente tenha um arquivo .href

    Em geral, você pode criar um componente wrapper genérico como este:

    <script>
  export let element;
  export let condition;
</script>

{#if condition}
  <svelte:element this={element} {...$$restProps}>
    <slot />
  </svelte:element>
{:else}
  <slot />
{/if}

    <Wrapper element="a" condition={...}>
  <!-- contents -->
</Wrapper>
    • 0

relate perguntas