如何从$$props.$$slots变量直接渲染Svelte组件插槽？

在Svelte里，$$props.$$slots中的每个插槽本质是渲染函数，不是直接可渲染的组件或片段，所以你之前试的方法都走不通。下面是两种可行的实现方式：

1. 直接调用插槽的渲染函数 #

因为插槽本身是返回VNode的函数，直接执行它就能渲染出内容，还可以在括号里传入插槽需要的props（如果有的话）：

{#if $$props.$$slots.myslot}
  {$$props.$$slots.myslot({ /* 这里可以传插槽需要的参数，比如 text: 'hello' */ })}
{/if}

2. 动态渲染指定名称的插槽 #

如果你的插槽名是动态变量（比如从父组件传入的slotName），可以通过对象索引的方式调用对应渲染函数：

<script>
  let slotName = 'myslot';
</script>

{#if $$props.$$slots[slotName]}
  {$$props.$$slots[slotName]({})}
{/if}

为什么之前的方法失效？ #

• 直接插值{$$props.$$slots.myslot}会把函数转为字符串输出，所以看到的是代码的字符串表示；
• <svelte:component>是用来渲染组件构造函数的，插槽是渲染函数，类型不匹配所以报错；
• <svelte:fragment>需要传入插槽的名称字符串（比如slot="myslot"），而不是插槽函数，所以直接传函数会报错。

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