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

Question

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

    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) => {
});

Answer 2

使用 document.querySelectorAll 不是惯用的 Svelte。

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

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

如果您确实需要访问 DOM api 的 Svelte bind:this or action 可以访问特定元素。

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

Svelte reactive statement with a variable fron onMount

scope

reactive

svelte

sveltekit