javascript - 如何在 Svelte 中使用开关渲染组件？

Question

我想在 Svelte 中使用 switch case 语句有条件地渲染组件，如下所示:

// 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>

TextContent 组件:

// components/text-content.svelte

<slot name="text-content">
    <span />
</slot>

似乎这种方法在 Svelte 中不起作用，因为我收到了 Unexpected Token 错误。

在 Svelte 中是否可以使用开关渲染组件？

Answer 1

你在那里写的更像是用于 React 的 JSX。在 Svelte 中，您无需在 JavaScript 中编写 HTML，而是将它们分开。

你要做的是制作一个查找表并使用 svelte:component 来呈现正确的组件:

<script>
  const BlockTypes = {
    "span": TextContent
  }
</script>

{#each children as child}
  {#if child.type === 'block'}
    <svelte:self {...child} />
  {:else}
    <svelte:component this={BlockTypes[child.type]} {...child} />
  {/if}
{/each}

svelte:self 假设这本身也是 block 类型的元素，因为原因您不能将组件导入自身，所以您需要这个这里的特例。有了它，您就可以立即使用嵌套 block 。

在此示例中，您将子项的所有属性传递给呈现的组件，因此您将不得不稍微重写您的组件，您也可以使用插槽，但使用命名插槽会造成严重的困惑。