Início / coding / Perguntas / 79213022
Accepted
Baboyiban
Asked: 2024-11-22 05:49:14 +0800 CST

Como embrulhar cada criança com uma etiqueta no Svelte 5?

  • 772

No Svelte 5, como posso envolver cada filho com uma tag como no exemplo abaixo?

{#if children}
  {#each children as child}
    <button
      onclick={() => {
        handleClick();
      }}
    >
      {@render child?.()}
    </button>
  {/each}
{/if}
svelte

1 respostas

  1. Best Answer

    Você não pode.

    Snippets são fragmentos compostos de componentes, blocos lógicos e DOM que podem conter absolutamente qualquer coisa, eles não são iteráveis.

    Você pode passar uma matriz de dados ou vários snippets, ambos podendo ser iterados.

    Exemplo de passagem de dados :

    <script>
    import List from './List.svelte';

    const items = [1, 2, 3];
</script>

<List {items}>
    {#snippet itemTemplate(item)}
        Item: {item}
    {/snippet}
</List>

    <!-- List.svelte -->
<script>
    const { items, itemTemplate } = $props();
</script>

<ul>
    {#each items as item}
        <li>{@render itemTemplate(item)}</li>
    {/each}
</ul>

    Como alternativa, envolva cada criança em um componente separado, seguindo as linhas de:

    <List>
  <ListItem>1</ListItem>
  <ListItem>2</ListItem>
  ...
</List>

    Então esse componente pode pegar qualquer coisa que precise ser adicionada em torno dos itens. Isso é, claro, mais verboso e o usuário precisa saber que isso deve ser adicionado.

    • 1

relate perguntas