scope - 带有 onMount 变量的 Svelte 响应式(Reactive)语句

Question

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

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

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

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

但是，我无法将 links 变量共享到我的响应式(Reactive)语句。我还尝试将 document.querySelectorAll 放入我的响应式(Reactive)语句中(根本不使用 onMount)，在我重新加载页面之前，它工作得很好。传统的方法是什么？

Answer 1

您需要在 onMount 之外声明该变量，以便它位于响应式(Reactive)语句的范围内。例如

let links = null;

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

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