Question

我有一个将选择保持为数组的组件，以及一个子组件，通过查看该数组中是否包含子组件来确定其状态。当我更改数组时，子组件不会重新呈现。我该如何解决？

REPL：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变量。

如何在使用功能确定状态的变量更改时重新呈现组件？

1 个答案: