使用狀態機而不在當前狀態上使用條件陳述句是否可行？

編輯：我嘗試的是：

• 創建大廳和登錄svelte組件 Login.svelte

<script lang="ts"/span>>/span>
</script>/span>

<main> 
    <h1>登錄</h1> 
</main>/span>

<style> 
</style> 

Lobby.svelte

<script lang="ts"/span>>
</script>/span>

<main> 
    <h1>Lobby</h1>
</main>/span>

<style> 
</style> 

• 在machine.js中使用它們
。

import { createMachine } from 'xstate'/span>;
import Login from ' ./Login.svelte'
import Lobby from './Lobby.svelte' 
//本機與Svelte完全解耦。
export const toggleMachine = createMachine（{
    id: 'toggle',
    initial: Login,
    states: {
        Login: {
            on: { TOGGLE: Lobby }.
        },
        Lobby: {
            on: { TOGGLE: Login }
        }
    }
});

• 在App.svelte中使用狀態機 App.svelte

<script> 
    import { interpret } from "xstate"/span>;
    import { toggleMachine } from "./machine";

    const toggleService = interpret（toggleMachine）.start（）。
</script>>

<button on:click={() => toggleService.send("TOGGLE") }>
    <$toggleService.value />
</button> 

我得到的錯誤是：

[!] (plugin svelte) ParseError: 預期有效的標簽名稱
src/App.svelte。
 7: 
 8: <button on:click={（）/span> => toggleService.send("TOGLE")}>
 9: <$toggleService.value />/span>
       ^
10: </button>
ParseError。預期有效的標簽名稱
    at error (/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/utils/error.ts:25:16)
    在Parser$1.error（/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/parse/index. ts：101：3)
    at read_tag_name (/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/parse/state/tag. ts：267：10)
    at tag (/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/parse/state/tag.ts:77: 15)
    在new Parser$1 (/home/walde/projectsvelte/xstate/node_modules/svelte/src/compiler/parse/index. ts：53：12)
    在決議（/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/parse/index.ts:218:17）。
    在編譯（/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/compile/index.ts：93：14)
    在Object.transform（/home/walde/projects/svelte/xstate/node_modules/rollup-plugin-svelte/index. js：111：21)
    在/home/walde/projects/svelte/xstate/node_modules/rollup/dist/shared/rollup.js:20218:25。

uj5u.com熱心網友回復：

我不能為xstate部分說話，但最后一個片段肯定是不行的。你不能像這樣動態地宣告一個標簽。但是你可以使用特殊的<svelte:component>元素來實作：

<script> 
    import { interpret } from "xstate"/span>;
    import { toggleMachine } from "./machine";

    const toggleService = interpret（toggleMachine）.start（）。
</script>>

<button on:click={() => toggleService.send("TOGGLE")}>
    撥動我
</button> 
<svelte:component this={$toggleService.value} />

檔案。https://svelte.dev/docs#svelte_component

uj5u.com熱心網友回復：

感謝dummdidumm，他幫助解決了svelte部分的問題。

如何在不寫條件陳述句的情況下將svelte和xstate結合起來使用，這個問題的完整解決方案是：

• 將組件系結到狀態機的背景關系中
。

<svelte:components this={$toggleService. context.component} />

• 在進入一個新的狀態時改變狀態機背景關系，使其與當前狀態相匹配。

 Login: {
            on: { TOGGLE: "Lobby" }。
            entry: assign({ component: (ctx) => ctx.component = Login }）。)
        }

完整的作業實體：
App.svelte

<script> 
    import { interpret } from "xstate"/span>;
    import { toggleMachine } from "./machine";
    const toggleService = interpret（toggleMachine）.start（）。
</script>>

<button on:click={（） => toggleService.send("TOGGLE")}>
    {$toggleService.value}.
</button> 
<svelte:component this={$toggleService.text.component} />

Lobby.svelte

<script lang="ts"/span>> 
</script>/span>
<main> 
    <h1>SVELTE Lobby</h1> 
</main>/span>
<style> 
</style> 

Login.svelte

<script lang="ts"/span>>
</script>/span>
<main> 
    <h1>SVELTE Login</h1> 
</main>/span>
<style> 
</style> 

machine.js

import { createMachine, assign } from 'xstate'/span>;
import Login from ' ./Login.svelte'
import Lobby from './Lobby.svelte' 
export const toggleMachine = createMachine（{
    id: 'toggle',
    initial: "Login",
    context: {
        component: Lobby: component: Lobby
    },
    states: {
        Login: {
            on: { TOGGLE: "Lobby" }。
            entry: assign({ component: (ctx) => ctx.component = Login }）。)
        },
        Lobby: {
            on: { TOGGLE: "Login" }。
            entry: assign({ component: (ctx) => ctx.component = Lobby }）。)
        }
    }
});

標籤：

上一篇：動態地改變clickableText的textDecorationandroidcompose

下一篇：如何在Liferay自定義搜索容器中添加DataTable