带有 onMount 变量的 Svelte 反应式语句

Question

我正在尝试使用“active”类来设置我的网络项目当前活动选项卡的样式。为了定位我正在使用的选项卡元素

    onMount(() => {
    const links = document.querySelectorAll(".topnav a");
});

然后我使用反应式语句来设计适当的元素，如下所示

    $: {
    links.forEach((link) => {
        if (link.getAttribute("id") === $page.url.pathname) {
            link.classList.add("active");
        } else {
            link.classList.remove("active");
        }
    });
}

但是，我无法将

links

变量共享到我的反应式语句中。我还尝试将

document.querySelectorAll

放入我的反应式语句中（根本不使用 onMount），它完美地工作，直到我重新加载页面。传统的方法是什么？

Answer 1

您需要在

onMount

之外声明变量，以便它位于反应语句的范围内。例如

let links = null;

onMount(() => {
    links = ...;
);

$: if (links != null) {
    links.forEach((link) => {
});

（正如 Bob Fanger 指出的那样，不建议查询 DOM，而且通常根本没有必要。）

Answer 2

使用

document.querySelectorAll

不是惯用的 Svelte。

使用模板语法更改类（或其他属性）：

<a class:active={link.id === $page.url.pathname}>
  {link.label}
</a>

如果您确实需要访问 DOM api，Svelte 可以使用

bind:this 或 action 来访问特定元素。