带有 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 ，而且通常根本没有必要。）