Svelte 5中如何为每个子元素包裹标签？

在Svelte 5里，你可以借助组件内置的children参数获取传入的所有子内容，结合{#each}遍历子元素，就能给每个子元素单独包裹指定标签，示例实现如下：

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

关键细节说明： #

• children是Svelte 5组件的内置参数，存储了组件接收的所有子元素，每个子元素都是可调用的渲染函数
• {@render child?.()}用于渲染子元素本身，?.可选链操作符可避免子元素为空时触发报错
• 如果需要给每个包裹标签绑定个性化逻辑（比如根据子元素差异执行不同操作），可以在handleClick中添加判断逻辑，或者结合子元素的相关参数做处理

内容的提问来源于stack exchange，提问作者Baboyiban