解决HeadlessUI Menu组件hover触发菜单的异常与崩溃问题

问题背景 #

使用Headless UI的Menu组件构建导航栏时，组件原生不支持hover触发菜单。尝试社区方案后遇到以下问题：

• 仅添加onMouseEnter事件会导致菜单无法关闭
• 添加onMouseLeave并调整状态逻辑后，切换嵌套菜单项时页面崩溃

可行解决方案 #

核心思路是为每个菜单层级独立维护展开状态，配合鼠标事件控制状态，同时处理嵌套菜单的事件隔离，避免状态冲突。

实现步骤 #

1. 为每个菜单（包括嵌套菜单）单独声明isOpen状态，避免共享状态导致的冲突
2. 给Menu按钮绑定onMouseEnter事件打开菜单，给Menu容器绑定onMouseLeave事件延迟关闭菜单（延迟处理可避免快速切换时误关闭）
3. 保留点击关闭的逻辑，保证键盘和触屏设备的交互一致性
4. 嵌套菜单的鼠标事件独立处理，不干扰父菜单状态

完整代码示例 #

import { useState, useEffect } from 'react';
import { Menu, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/solid';

export default function App() {
  return (
    <nav className="bg-gray-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <a href="/" className="text-white font-bold text-xl">Logo</a>
            <div className="ml-10 flex items-baseline space-x-4">
              {/* 直接链接项 */}
              <a href="/about" className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
                关于我们
              </a>
              {/* 带下拉的菜单 */}
              <DropdownMenu title="产品">
                <DropdownItem href="/product1">产品1</DropdownItem>
                <DropdownItem href="/product2">产品2</DropdownItem>
                {/* 嵌套菜单 */}
                <DropdownMenu title="子产品">
                  <DropdownItem href="/subproduct1">子产品1</DropdownItem>
                  <DropdownItem href="/subproduct2">子产品2</DropdownItem>
                </DropdownMenu>
              </DropdownMenu>
              <DropdownMenu title="服务">
                <DropdownItem href="/service1">服务1</DropdownItem>
                <DropdownItem href="/service2">服务2</DropdownItem>
              </DropdownMenu>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

// 封装下拉菜单组件
function DropdownMenu({ title, children }) {
  const [isOpen, setIsOpen] = useState(false);
  const [closeTimeout, setCloseTimeout] = useState(null);

  const handleMouseEnter = () => {
    // 清除之前的关闭延迟
    if (closeTimeout) clearTimeout(closeTimeout);
    setIsOpen(true);
  };

  const handleMouseLeave = () => {
    // 延迟关闭，避免快速移动鼠标误触发
    const timeout = setTimeout(() => setIsOpen(false), 200);
    setCloseTimeout(timeout);
  };

  // 组件卸载时清除定时器
  useEffect(() => {
    return () => {
      if (closeTimeout) clearTimeout(closeTimeout);
    };
  }, [closeTimeout]);

  return (
    <Menu as="div" className="relative">
      <Menu.Button
        onMouseEnter={handleMouseEnter}
        className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium flex items-center"
      >
        {title}
        <ChevronDownIcon className="ml-1 h-4 w-4" />
      </Menu.Button>
      <Transition
        show={isOpen}
        enter="transition ease-out duration-100"
        enterFrom="transform opacity-0 scale-95"
        enterTo="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
        <Menu.Items
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          className="absolute right-0 mt-2 w-48 origin-top-right bg-white rounded-md shadow-lg py-1 ring-1 ring-black ring-opacity-5 focus:outline-none"
        >
          {children}
        </Menu.Items>
      </Transition>
    </Menu>
  );
}

// 下拉菜单项组件
function DropdownItem({ href, children }) {
  return (
    <Menu.Item>
      {({ active }) => (
        <a
          href={href}
          className={`${active ? 'bg-gray-100' : ''} block px-4 py-2 text-sm text-gray-700`}
          onClick={() => {
            // 点击链接后关闭所有菜单
            document.querySelectorAll('[aria-expanded="true"]').forEach(btn => btn.click());
          }}
        >
          {children}
        </a>
      )}
    </Menu.Item>
  );
}

关键细节说明 #

• 独立状态管理：每个DropdownMenu组件都有自己的isOpen状态，嵌套菜单不会影响父菜单的状态，避免了切换时的状态冲突导致崩溃
• 延迟关闭逻辑：onMouseLeave时添加200ms延迟，防止用户快速移动鼠标在菜单间切换时误关闭菜单，提升交互体验
• 事件清理：组件卸载时清除定时器，避免内存泄漏
• 点击关闭：点击菜单项时手动关闭所有菜单，保证用户点击链接后菜单自动收起，符合预期

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