Astro组件显示状态切换：Header菜单按钮点击报错问题解决

问题场景 #

我定义了一个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中，---代码块里的变量是服务器端运行的，而<script is:inline>里的代码是在浏览器端运行的，两者运行环境完全隔离，前端脚本无法直接访问服务器端的变量，这就是报错的根本原因。

解决方案 #

方案1：纯前端DOM操作（推荐简单场景） #

直接通过操作DOM元素的class来控制显示隐藏，不需要依赖服务器端变量：

---
---
<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>

    <!-- 默认添加hidden类隐藏菜单 -->
    <div id="mobileMenu" 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');
    const mobileMenu = document.getElementById('mobileMenu');
    
    menuButton?.addEventListener("click", () => {
        // 切换hidden类实现显示/隐藏
        mobileMenu.classList.toggle('hidden');
        console.log("menu hidden: ", mobileMenu.classList.contains('hidden'));
    })
</script>

方案2：使用客户端状态（适合需要管理状态的场景） #

通过is:client指令让脚本在客户端运行，将状态变量定义在客户端环境中：

---
---
<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>

    <div id="mobileMenu" class="container 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:client>
    // 客户端状态变量
    let menuHidden = true;
    const menuButton = document.getElementById('menuButton');
    const mobileMenu = document.getElementById('mobileMenu');

    // 初始化菜单隐藏状态
    mobileMenu.classList.toggle('hidden', menuHidden);

    menuButton?.addEventListener("click", () => {
        menuHidden = !menuHidden;
        mobileMenu.classList.toggle('hidden', menuHidden);
        console.log("menu hidden: ", menuHidden);
    })
</script>

内容的提问来源于stack exchange，提问作者Prashant