为什么这个组件不重新渲染

Question

为什么 Step 组件在 props (aStep) 发生变化时不重新渲染？

//Game.svelte
import  Step  from './Step.svelte';

var states = [
    { name: "Red",     next: 1,  buttonText: "Goto2"},
    { name: "Yellow",  next: 2,  buttonText: "Goto3" },
    { name: "Green",   next: 3,  buttonText: "Goto4"},
    { name: "Blue",    next: 0,  buttonText: "Goto1"},
];

  
let curState =  states[0]
var stepNumber = 1;
var theStep = undefined;

function nextStep() {
        makeStep(curState, stepNumber);
        stepNumber++;  
    curState=states[curState.next];

        console.log(theStep)
}

function makeStep(state, stepNumber) {
    theStep = {
        title: "Step:" + stepNumber + " " +state.name,
        buttonText: state.buttonText,
        buttonAction: nextStep
    }
}
</script>

<input id="startBtn" name="Submit" type="submit" value="Start" on:click={nextStep}/>

{#if theStep}
    <Step aStep = {theStep}/>
{/if}

Step 组件：

<script>
    export let aStep;

    let {title, buttonText, buttonAction} = aStep

</script>

<div>
    <p class = "title">{title}</p>
    <div class ="stepBody">
        <button on:click={buttonAction}>{buttonText}</button>
    </div>
</div>

我可以看到 console.log 每次按下按钮时 theStep 都会发生变化，但 Step 组件保持不变。

有一个 Svelte REPL here

Answer 1

要使 Step.svelte 中的解构具有反应性，请将行更改为

 $: ({title, buttonText, buttonAction} = aStep)

或者也许更好读，将道具散布在对象上并直接导出您想要使用的密钥

[App.svelte]

{#if theStep}
    <Step {...theStep}/>
{/if}

[Step.svelte]

<script>
    export let title, buttonText, buttonAction
</script>

为什么这个组件不重新渲染

Why is this component not re-rendering

svelte

svelte-component