小编Tim*_*son的帖子

如何在 Svelte 中使用开关渲染组件?

我想使用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 …

javascript switch-statement svelte sveltekit

4
推荐指数
1
解决办法
9804
查看次数

标签 统计

javascript ×1

svelte ×1

sveltekit ×1

switch-statement ×1