javascript - 如何在 Astro 中切换组件的显示状态

Question

我有一个 Astro 组件 <Header>定义的。它有一个菜单按钮，应该根据单击该按钮来显示/隐藏组件。这就是我定义组件的方式:

---
let menuHidden = true;
---
<section id="header-all"
    class="container min-w-full bg-gradient-to-br from-blue-700 to-blue-500">
    <header class="container mx-auto px-5 flex items-center justify-between h-36">
        <button id="menuButton">
            <i class='lg:hidden bx bx-menu text-white text-4xl'></i>
        </button>
    </header>

    {!menuHidden &&
    <div class="container hidden lg:hidden mx-auto px-5">
        <nav class="flex flex-col py-5 rounded-lg bg-gray-100 px-10 text-gray-100 text-xl">
            <a href="#" class="py-3 text-2xl font-semibold text-gray-800 hover:bg-yellow-300 hover:rounded-lg px-5">Home</a>
        </nav>
    </div>
    }
</section>
<script is:inline>
    const menuButton = document.getElementById('menuButton');
    menuButton?.addEventListener("click", () => {
        menuHidden = !menuHidden;
        console.log("menu hidden: ", menuHidden);
    })
</script>

当我单击按钮时，我的控制台中出现以下错误:

(index):904 Uncaught ReferenceError: menuHidden is not defined
    at HTMLButtonElement.<anonymous> ((index):904:9)

如何在 astro 中实现这一目标？

Answer 1

这里最简单的是，如果服务器不需要知道客户端菜单是否隐藏，则更改客户端事件单击以简单地将 id 添加到菜单容器中，然后

const menuContainer = document.getElementById('menuContainer');
menuContainer.classList.toggle("hidden")

没有提到，但您可能希望菜单状态在页面重新加载时保持不变，Astro 是一个 MPA 框架，您可以通过将其转换为 SPA 来避免这种情况(例如，将 React 与 Astro 结合使用并将所有内容放在一个页面中，或者寻找其他 Astro SPA 解决方案)，但是坚持 MPA 概念(这就是 Astro 的设计目的)，并且在服务器和客户端之间进行状态同步，这看起来会比 SPA 只从服务器加载一次页面更复杂.

但是，可以通过两种方式保持服务器/客户端状态同步，让我们将菜单状态想象成一个计数器(0 关闭，1 打开)

• 这里是客户端持久计数器的示例，在服务器端使用 cookie 进行同步，以便页面重新加载不会影响它并保持其正确 https://github.com/MicroWebStacks/astro-examples#13_client-persistent-counter

• 如果无法使用 cookie，这里使用 sessionStorage 和 url 参数进行相同的行为 https://github.com/MicroWebStacks/astro-examples#14_client-storage-counter

再次警告，服务器/客户端同步可能听起来很复杂，这是由于 MPA 与 SPA 概念所致。