Svelte：在每个循环中将数据传递并绑定到子组件答案

【问题标题】：Svelte: Pass and bind data to child component in each loopSvelte：在每个循环中将数据传递并绑定到子组件
【发布时间】：2022-02-11 06:24:46
【问题描述】：

我对在 Svelte 的循环中将 props 传递给组件感到非常困惑。我对下面代码 sn-p 的预期行为是存储变量 files 中的更改会触发内容的重新渲染，这对于 divs 类和{file}: {is_open} 完美无缺。但是，子组件 Icon 没有收到 is_open 变量的更新。这导致了一种奇怪的情况，{file}: {is_open} 在此组件中呈现为 filename: true，而子组件 Icon 将显示 filename: false。

{#each Object.entries($files) as [file, is_open], i}
<div class:open={is_open} class:closed={!is_open}>

    <div on:click={() => openFile(file)}>
        {file}: {is_open}
    </div>

    <div on:click={() => closeFile(file)}>
        <Icon bind:open={is_open} />
    </div>

</div>
{/each}

我偶然发现了这个问题的解决方案 this thread 表示这确实是这种情况下的预期行为。但是我怎样才能使这项工作呢？与我对 Svelte 的整体体验形成鲜明对比的是，我发现这非常违反直觉。

编辑：

原来我没有直接在子组件中使用 is_open 而是将值存储在另一个没有$: 符号的变量中，因此不会重新计算这个变量。我的错，问题解决了。

【问题讨论】：

你能在REPL中复制这个吗？
在这个简化版本中，它似乎可以正常工作svelte.dev/repl/e6dacb65dfd54c18aea9c3142099ca12?version=3.46.4

标签： javascript binding bind each svelte

【解决方案1】：

您正在寻找的是keyed each block，这将确保 div（每个语句中的块）将正确映射到正确的文件状态。

您也可以查看official svelte tutorial about keyed each 在你的情况下

{#each Object.entries($files) as [file, is_open], i (file)} <!--added (file)-->
<div class:open={is_open} class:closed={!is_open}>

    <div on:click={() => openFile(file)}>
        {file}: {is_open}
    </div>

    <div on:click={() => closeFile(file)}>
        <Icon bind:open={is_open} />
    </div>

</div>
{/each}

【讨论】：