为什么我无法使用 use:action Svelte 添加/删除主体类

Question

我有这个功能

    const bodyClass = (node) => {
        if (open && !node.classList.contains("is-search-show")) {
            node.classList.add("is-search-show");
       
        } else if (
            !open &&
            node.classList.contains("is-search-show")
        ) {
            node.classList.remove("is-search-show");
        }
    };

组件中添加了 Svelte body 元素

<svelte:body use:bodyClass use:HandleClickMenu />

但我不知道为什么当

open = true

没有添加“is-search-show”类到主体时它不起作用。请帮助我理解这一点。谢谢

我尝试将

node.classList.add("is-search-show");

更改为

window.document.body.classList.add("is-search-show");

，但还是不行。

Answer 1

操作代码不是反应式的。你必须：

• 返回具有

  update

  函数的对象
• 将任何依赖项作为参数传递给操作，否则

  update

  将不会被调用

查看文档

例如

const bodyClass = node => {
    const update = () => node.classList.toggle('is-search-show', open);
    update();

    return { update };
}

<svelte:body use:bodyClass={open} />

REPL

（您还可以返回

destroy

函数进行清理。）