如何在Svelte组件内声明Snippet避免其隐式转为Prop？

核心问题 #

在Flowbite Svelte的TableBody组件内声明Snippet时，Svelte会自动将其隐式转为组件Prop，导致IDEA插件报类型错误，还可能和组件未来新增的同名Prop冲突。

可行解决方案 #

方案1：用<svelte:fragment>包裹Snippet声明 #

这是最彻底的解决方法，既能保留Snippet在使用位置附近的写法，又能避免隐式转Prop的问题。

代码示例：

<Table>
    <!-- 表格头部等其他内容 -->
    <TableBody>
        <svelte:fragment>
            {#snippet row(row: UserProductListEntry)}
                {row.product.title}
            {/snippet}
        </svelte:fragment>
        
        <!-- 遍历数据并渲染Snippet -->
        {#each productList as product}
            {@render row(product)}
        {/each}
    </TableBody>
</Table>

<svelte:fragment>是无渲染容器，内部的Snippet只会在当前组件作用域内生效，不会被识别为TableBody的Prop，从根源上解决类型错误和潜在冲突。

方案2：抑制IDE类型错误提示（仅临时规避） #

如果不想调整代码结构，可以用Svelte的注释指令忽略IDEA插件的错误提示，但此方法不解决本质的Prop冲突风险。

代码示例：

<Table>
    <!-- 表格头部等其他内容 -->
    <!-- svelte-ignore TypeScriptError -->
    <TableBody>
        {#snippet row(row: UserProductListEntry)}
            {row.product.title}
        {/snippet}
        
        {#each productList as product}
            {@render row(product)}
        {/each}
    </TableBody>
</Table>

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