主页 / coding / 问题 / 79585367
Accepted
Seva Golovanov
Asked: 2025-04-22 05:31:32 +0800 CST

在组件内部声明一个代码片段，而不将其作为 prop 隐式传递给组件

  • 772

Svelte 教程演示了如何声明表行片段：

<tbody>
    {#snippet monkey()}...{/snippet}

    {@render monkey()}
</tbody>

到目前为止一切都很好。将代码片段放在靠近使用位置的位置是有意义的——表格行代码片段确实应该放在 中tbody。

我也想重用表格行的代码片段。不过我使用的是 Flowbite Svelte 组件库。代码如下：

<Table>
    ...
    <TableBody>
        {#snippet row(row: UserProductListEntry)}
            {row.product.title}
        {/snippet}

这在运行时有效，但由于代码片段隐式地成为 TableBody 的 prop，因此存在问题：

  1. 我收到这个类型错误： IDE错误 这是 IDEA Svelte 插件的错误吗？它没有任何引用，例如 ESLint。它应该是一个警告还是可抑制的？我在 JetBrains 的问题跟踪器上没有找到类似的信息。
  2. （不太重要）在这种情况下，我不打算将代码片段作为 prop 传递给 TableBody。如果它恰好需要同名的代码片段怎么办？

那么问题是，有没有办法让这段代码不成为隐式 prop？或者至少能以某种方式处理问题 1，而无需将代码片段移出 TableBody 和 Table ？

svelte

1 个回答

  1. Best Answer

    该错误有点误报，是通过将代码片段传递给使用插槽而不是代码片段 & 的组件而触发的@render。 （我已经报告过这个问题。）

    仅当代码片段作为共享插槽名称的道具传递时，代码片段到插槽的互操作才有效。

    如果您只需要本地代码片段，可以显式children声明默认的 slot/snippet。因此，对于使用通常可以省略的代码片段的 Svelte 5 来说：

    <Component>
  {#snippet children()}
    {#snippet localSnippet()} ... {/snippet}

    {@render localSnippet()}
  {/snippet}
</Component>

    对于像 Flowbite 当前的遗留组件，您可能需要一个default插槽元素/片段。

    为了避免错误，现在您可以使用如下<slot>语法：

    <TableBody>
  <svelte:fragment slot="row" let:item={row} >
    {row.product.title}
  </svelte:fragment>

    （此代码将按row预期使用插槽；组件已经循环遍历所有行，因此您只需定义一个row代码片段或插槽即可呈现所有内容。）

    • 1

相关问题