在Svelte上的脚本标记中使用插槽字符串

Question

svelte中这个react函数的等价物是什么？我尝试使用$$插槽，但只得到布尔值

const Foo = ({children}) => {
console.log(children);
return(<h1>{children}</h1>)
}

Answer 1

我能想到的一种方法是：

自定义组件速度

<script>
let slotString;
$: console.log(slotString);
</script>
<div contenteditable="true" bind:innerHTML={slotString}>
<slot />
</div>

index.svelte

<script>
import CustomComponent from "./CustomComponent.svelte";
</script>
<CustomComponent>ABC</CustomComponent>

Answer 2

如果你有这个：

<WrapperComponent>
<span>This is child content</span>
</WrapperComponent>

在React中，您将获得<span>This is child content</span>，并按照所示进行渲染。给定上述构造，Svelte等价物为：``html

```没必要和一个叫"孩子"的东西混在一起并不是说在苗条，孩子们不必在标签你可以很容易地做

<WrapperComponent>
Free flowing children
</wrapperComponent>
<!-- or also -->
<WrapperComponent>
<span>one child</span>
<span>two child</span>
<span>three child</span>
</WrapperComponent<