Início / coding / Perguntas / 79585367
Accepted
Seva Golovanov
Asked: 2025-04-22 05:31:32 +0800 CST

Declare um snippet dentro de um componente sem que ele seja passado implicitamente ao componente como um prop

  • 772

O tutorial do Svelte demonstra como declarar um trecho de linha de tabela:

<tbody>
    {#snippet monkey()}...{/snippet}

    {@render monkey()}
</tbody>

Até aqui, tudo bem. Faz sentido colocar um trecho perto de onde ele está sendo usado — um trecho de linha de tabela realmente pertence a tbody.

Também quero reutilizar um trecho de linha de tabela. Só que eu uso a biblioteca de componentes Flowbite Svelte. Então o código fica assim:

<Table>
    ...
    <TableBody>
        {#snippet row(row: UserProductListEntry)}
            {row.product.title}
        {/snippet}

Isso funciona em tempo de execução, mas tem problemas porque o snippet se torna implicitamente a prop do TableBody:

  1. Estou recebendo este erro do tipo: Erro IDE Este é um erro do plugin IDEA Svelte? Não há nenhuma referência, por exemplo, ao ESLint. Deveria ser um aviso e/ou algo passível de supressão? Não encontrei nada parecido no rastreador de problemas da JetBrains.
  2. (Menos importante) Neste caso, não pretendo passar o snippet para TableBody como uma propriedade. E se por acaso esperar um snippet com o mesmo nome?

Então a questão é: existe uma maneira de impedir que esse trecho se torne uma propriedade implícita? Ou pelo menos lidar com o problema 1 de alguma forma, sem mover o trecho para fora do TableBody e da Table?

svelte

1 respostas

  1. Best Answer

    O erro é um pouco falso positivo e é acionado ao passar um snippet para um componente que usa slots em vez de snippets & @render. ( Já relatei isso .)

    A interoperabilidade de snippet para slot só funciona se os snippets forem passados ​​como propriedades que compartilham o nome do slot.

    Nos casos em que você deseja apenas um snippet local, pode declarar explicitamente o slot/snippet padrão. Portanto, para um Svelte 5 que usa um childrensnippet que geralmente pode ser omitido:

    <Component>
  {#snippet children()}
    {#snippet localSnippet()} ... {/snippet}

    {@render localSnippet()}
  {/snippet}
</Component>

    Para componentes legados como os atuais do Flowbite, você provavelmente precisará de um defaultelemento/fragmento de slot.

    Para evitar o erro, por enquanto você pode usar <slot>uma sintaxe como esta:

    <TableBody>
  <svelte:fragment slot="row" let:item={row} >
    {row.product.title}
  </svelte:fragment>

    (Este código usaria o rowslot conforme pretendido; o componente já faz um loop em todas as linhas, então você só precisa definir um rowsnippet ou slot para renderizar tudo.)

    • 1

relate perguntas