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

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}

Nested.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 的变化做出反应，所以它没有这样做。

可以内联条件，让selection变量在表达式中直接被提及：

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

或者您也可以这样做：

    selected={selection, isSelected(number)}

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

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

How do I re-render a component on variable change that determines state using a function?

svelte