主页 / coding / 问题 / 79213022
Accepted
Baboyiban
Asked: 2024-11-22 05:49:14 +0800 CST

如何在 Svelte 5 中用标签包裹每个子项？

  • 772

在 Svelte 5 中，我如何用标签包裹每个子项，如下例所示？

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

1 个回答

  1. Best Answer

    你不能。

    片段是由组件、逻辑块和 DOM 组成的片段，可以包含任何内容，但它们不可迭代。

    您可以传递一个数据数组或多个片段，两者都可以进行迭代。

    传递数据示例：

    <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>

    或者，将每个子项包装在单独的组件中，如下所示：

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

    然后，该组件可以处理需要在项目周围添加的所有内容。这当然更加冗长，用户需要知道应该添加这些内容。

    • 1

相关问题