Svelte中#each块内条件渲染插槽元素失效问题排查

问题描述 #

我尝试在Svelte的#each块内根据条件渲染带插槽的元素，但无法实现预期效果。以下是无法正常运行的代码：

<Menu>
  {#each items as item}
    <Item>
      {#if item.icon}
        <Icon slot="icon" icon={item.icon} />
      {/if}
      {#if item.label}
        <Label slot="label">{item.label}</Label>
      {/if}
    </Item>
  {/each}
</Menu>

问题原因 #

在Svelte中，#each循环默认会复用组件实例来优化性能。但当循环内存在条件渲染的插槽时，这种复用机制会导致插槽绑定异常——条件切换时，插槽内容无法正确更新甚至完全不渲染。

解决方案 #

给循环内的<Item>组件绑定唯一key值，强制Svelte为每个循环项创建独立的组件实例，避免复用带来的插槽问题。修改后的代码如下：

<Menu>
  {#each items as item (item.id)} <!-- 用item的唯一标识作为key，比如id -->
    <Item>
      {#if item.icon}
        <Icon slot="icon" icon={item.icon} />
      {/if}
      {#if item.label}
        <Label slot="label">{item.label}</Label>
      {/if}
    </Item>
  {/each}
</Menu>

如果列表项没有现成的唯一ID，也可以临时使用索引作为key（不推荐用于需要动态增删的列表）：

{#each items as item, index (index)}

同时要确保<Item>组件的插槽定义正确，比如命名插槽的声明：

<!-- Item.svelte -->
<div class="item-container">
  <slot name="icon" />
  <slot name="label" />
</div>

效果验证 #

添加唯一key后，每个<Item>实例会独立处理自身的条件插槽逻辑，根据item的属性正确显示或隐藏对应插槽内容，不会再出现复用导致的渲染异常。

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