svelte - 如何重新渲染使用函数确定状态的变量更改组件？

Question

我有一个组件将选择维护为数组，还有一个子组件通过查看它是否包含在该数组中来确定其状态。当我更改数组时，子组件不会重新呈现。我该如何解决这个问题？

回复:https://svelte.dev/repl/f2074ef75dee444faaee005b8b7cf9b9

App.svelte

<script>
    import Nested from "./Nested.svelte";

    let selection = [];

    function isSelected(n) {
        return selection.indexOf(n) > -1;
    }

    function click(e) {
        const n = e.detail.number;
        if (isSelected(n)) {
            selection = selection.filter(x => x != n);
        } else {
            selection = [...selection, n];
        }
        console.log("Selection is", selection);
    }
</script>

{#each [1, 2, 3] as number}
    <Nested
                    {number}
                    selected={isSelected(number)}
                    on:click={click} />
{/each}

嵌套.svelte

<script>
    export let selected, number;
    import { createEventDispatcher } from "svelte";

    const dispatch = createEventDispatcher();

    function click() {
        dispatch("click", {
            number
        });
    }

</script>

<style>
    .selected {
        color: red;
    }
</style>

<div class:selected={selected} on:click={click}>
    {number}
</div>

Answer 1

问题是这样的

    selected={isSelected(number)}

在这个表达式中:

              isSelected(number)

Svelte 将针对表达式中任何变量的每次更改进行更新。即:isSelected 或 number。

在你的例子中，你想对 selection 的变化使用react，但它没有这样做。

您可以内联条件，以便在表达式中直接提及 selection 变量:

    selected={selection.indexOf(number) > -1}

或者你可以这样做:

    selected={selection, isSelected(number)}

逗号语法 x, y 只是有点晦涩的 JS 语法，用于表达式的值解析为最后一项(尝试 'a', 'b', 'c' 在你的控制台中看看我的意思)......但在这种情况下，它允许提示 Svelte 它应该注意这里的 selection 变量。