如何在Svelte中使用switch语句实现组件的条件渲染？

问题原因与解决方案 #

你遇到的Unexpected Token报错和switch语句本身无关，Svelte完全支持用switch做条件渲染，只是你的写法不符合Svelte的语法规则：

• Svelte的组件/HTML标签语法只能写在<script>块外的模板区域，不能像React一样在普通JS函数里直接返回标签，这是你报错的直接原因。
• 你写的for循环逻辑存在问题，循环体内直接return只会执行一次，完全不需要额外写这段逻辑，用map就可以处理数组遍历。

推荐实现方案（递归组件） #

这个方案最符合Svelte的设计逻辑，可实现你的递归渲染需求：

步骤1：新建递归渲染组件 ContentRenderer.svelte

<script>
import TextContent from './text-content.svelte';
// 接收传入的数据
export let data;
</script>

<!-- 处理数组类型数据 -->
{#if Array.isArray(data)}
  {#each data as item}
    <ContentRenderer data={item} />
  {/each}
<!-- 处理block类型 -->
{:else if data._type === 'block'}
  {#each data.children as child}
    <ContentRenderer data={child} />
  {/each}
<!-- 处理span类型 -->
{:else if data._type === 'span'}
  <TextContent>
    <span slot="text-content">{data.text}</span>
  </TextContent>
{/if}

步骤2：修改原 index.svelte 代码

<script>
import ContentRenderer from './components/ContentRenderer.svelte'
import { someData } from './api/some-data.js'
</script>

<div>
  {#each someData as data}
    <ContentRenderer {data} />
  {/each}
</div>

如果你坚持要用switch语句写判断逻辑 #

可以把switch的判断结果存为响应式变量，再在模板里做条件渲染，示例如下：

<script>
import TextContent from './text-content.svelte';
export let data;

// 用switch判断渲染类型
$: renderType = (() => {
  if (Array.isArray(data)) return 'array'
  switch (data._type) {
    case 'block': return 'block'
    case 'span': return 'span'
    default: return null
  }
})()
</script>

{#if renderType === 'array'}
  {#each data as item}
    <ContentRenderer data={item} />
  {/each}
{:else if renderType === 'block'}
  {#each data.children as child}
    <ContentRenderer data={child} />
  {/each}
{:else if renderType === 'span'}
  <TextContent>
    <span slot="text-content">{data.text}</span>
  </TextContent>
{/if}

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