Svelte子组件Checkbox无法响应props值更新问题排查

开发Svelte树形视图组件时遇到问题：每个节点包含Checkbox，勾选父节点后，子节点的isChecked值在响应式块中已显示为true，但Checkbox组件的勾选状态未同步更新。使用的是carbon-components-svelte中的Checkbox组件。

相关代码 #

TreeView.svelte

<script lang="ts">
    import TreeNode from "./TreeNode";
    import TreeNodeView from "./TreeNodeView.svelte";

    export let isChecked: boolean = false;
    export let treeNodes: Array<TreeNode>;
</script>

<ul role="group">
    {#each treeNodes as treeNode ( treeNode.id )}
        <TreeNodeView {isChecked} {treeNode} />
    {/each}
</ul>

TreeNodeView.svelte

<script lang="ts">
  import ...

  let hasFocus: boolean = false;

  function onChecked(e: CustomEvent<boolean>) {
    isChecked = e.detail;
  }

  export let isChecked: boolean;
  export let treeNode: TreeNode;

  $:{
    console.log(`${treeNode.text}.isChecked = ${isChecked}`);
  }
</script>

<li>
    </div>
  {:else}
    <div>&nbsp;</div>
  {/if}
  {#if treeNode.children.length === 0}
    <Link href="~"><Checkbox labelText={treeNode.text} /></Link>
  {:else}
    <Checkbox checked={isChecked} labelText={treeNode.text} id={treeNode.id} name={treeNode.id} on:check={onChecked} />
  {/if}
  {#if treeNode.isSelected && treeNode.children.length}
    <TreeView treeNodes={treeNode.children} {isChecked} />
  {/if}
</li>

问题排查与解决 #

通过响应式块的日志可以确认，子节点的isChecked值已正确传递，但Checkbox未更新显示。最终发现是叶子节点的Checkbox遗漏了checked属性绑定——非叶子节点的Checkbox已绑定checked={isChecked}，但叶子节点的Checkbox仅设置了labelText，未关联状态值。

修改叶子节点的Checkbox代码，添加checked={isChecked}绑定即可解决：

{#if treeNode.children.length === 0}
    <Link href="~"><Checkbox labelText={treeNode.text} checked={isChecked} /></Link>
{:else}
    <Checkbox checked={isChecked} labelText={treeNode.text} id={treeNode.id} name={treeNode.id} on:check={onChecked} />
{/if}

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