时间戳

首页 > 解决方案 > 如何在使用函数确定状态的变量更改时重新渲染组件？

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

问题描述

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

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}

嵌套的.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>

标签： svelte

解决方案

问题是这个

    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变量在这里。

推荐阅读