我想使用switch caseSvelte 中的语句有条件地渲染组件,如下所示:
// index.svelte
<script>
import TextContent from './components/text-content.svelte'
import { someData } from './api/some-data.js'
const ContentSwitch = (data) => {
switch (data._type) {
case 'block':
return data.children.map((child) => ContentSwitch(child));
case 'span':
return (
<TextContent>
<span slot="text-content">{data.text}</span>
</TextContent>
);
}
for (let index = 0; index < data.length; index++) {
return data.map((item) => ContentSwitch(item));
}
};
</script>
<div>
{#each someData as data}
{ContentSwitch(data)}
{/each}
</div>
Run Code Online (Sandbox Code Playgroud)
文本内容组件:
// components/text-content.svelte
<slot name="text-content">
<span />
</slot>
Run Code Online (Sandbox Code Playgroud)
看来这种方法在 Svelte 中不起作用,因为我收到了错误Unexpected …