Svelte结合XState如何无需条件判断将组件作为状态渲染

报错原因 #

Svelte 本身不支持直接用<$变量名/>的语法渲染动态组件，这是编译期语法限制，所以你会收到「期望合法标签名」的解析错误。同时不建议将 Svelte 组件直接作为 Xstate 的状态值，会破坏状态机跨框架复用的独立性。

实现步骤 #

你完全不需要修改原有状态机的字符串状态定义，只需要新增一层状态到组件的映射，配合 Svelte 内置的动态组件语法即可实现无判断渲染：

1. 保持 Xstate 状态机的原有逻辑，不要引入组件依赖

// machine.js
import { createMachine } from 'xstate';

export const toggleMachine = createMachine({
    id: 'toggle',
    initial: 'LOGIN',
    states: {
        LOBBY: {
            on: { TOGGLE: 'LOGIN' }
        },
        LOGIN: {
            on: { TOGGLE: 'LOBBY' }
        }
    }
});

2. 在 App.svelte 中定义状态与组件的映射表，使用<svelte:component>动态渲染对应组件

<!-- App.svelte -->
<script>
    import { interpret } from "xstate";
    import { toggleMachine } from "./machine";
    import Login from './Login.svelte'
    import Lobby from './Lobby.svelte'

    const toggleService = interpret(toggleMachine).start();
    // 状态到组件的映射表，新增状态只需要在这里加对应配置即可
    const stateComponentMap = {
        LOGIN: Login,
        LOBBY: Lobby
    }
</script>

<button on:click={() => toggleService.send("TOGGLE")}>
    <svelte:component this={stateComponentMap[$toggleService.value]} />
</button>

扩展说明 #

如果需要给组件传参，直接在<svelte:component>上绑定属性即可，所有属性都会透传给当前渲染的组件：

<svelte:component 
    this={stateComponentMap[$toggleService.value]} 
    user={$userStore}
    on:someEvent={handleEvent}
/>

内容的提问来源于stack exchange，提问作者Koronis Neilos