如何让Headless UI Menu组件默认展开且保留开闭交互？

你之前用static属性和强制show={true}导致菜单无法关闭，是因为static会让组件完全失去交互能力，变成纯静态元素。要实现默认展开同时保留开闭功能，用受控状态管理就可以解决，具体步骤如下：

1. 自己维护一个状态变量，初始值设为true，用来控制菜单的展开/收起状态
2. 把这个状态绑定到Menu组件的open属性，同时通过onClose事件处理外部点击或ESC键关闭的逻辑
3. 给Menu.Button添加点击事件，切换状态实现手动开闭
4. Transition组件的show属性也绑定这个状态，确保过渡效果和菜单状态同步

以下是完整的代码示例：

import { useState } from 'react'
import { Menu, Transition } from '@headlessui/react'

function DefaultOpenMenu() {
  // 初始状态设为true，实现菜单默认展开
  const [isOpen, setIsOpen] = useState(true)

  return (
    <Menu open={isOpen} onClose={() => setIsOpen(false)}>
      <Menu.Button onClick={() => setIsOpen(!isOpen)}>
        打开菜单
      </Menu.Button>
      <Transition
        show={isOpen}
        enter="transition duration-100 ease-out"
        enterFrom="transform scale-95 opacity-0"
        enterTo="transform scale-100 opacity-100"
        leave="transition duration-75 ease-out"
        leaveFrom="transform scale-100 opacity-100"
        leaveTo="transform scale-95 opacity-0"
      >
        <Menu.Items className="absolute right-0 mt-2 w-48 rounded-md bg-white shadow-lg border border-gray-200">
          <Menu.Item>
            {({ active }) => (
              <a
                href="#"
                className={`block px-4 py-2 text-sm ${active ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-100'}`}
              >
                个人资料
              </a>
            )}
          </Menu.Item>
          <Menu.Item>
            {({ active }) => (
              <a
                href="#"
                className={`block px-4 py-2 text-sm ${active ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-100'}`}
              >
                设置
              </a>
            )}
          </Menu.Item>
          <Menu.Item>
            {({ active }) => (
              <a
                href="#"
                className={`block px-4 py-2 text-sm ${active ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-100'}`}
              >
                退出登录
              </a>
            )}
          </Menu.Item>
        </Menu.Items>
      </Transition>
    </Menu>
  )
}

export default DefaultOpenMenu

关键说明： #

• useState(true)：初始化状态为true，让菜单加载时默认展开
• Menu的open属性：绑定状态变量，控制菜单的展开状态
• onClose={() => setIsOpen(false)}：处理点击菜单外部或按ESC键时的关闭逻辑
• Menu.Button的onClick：切换状态，实现点击按钮手动打开/关闭菜单
• Transition的show：和状态绑定，保证过渡动画和菜单状态同步

这样设置后，菜单会默认展开，同时保留所有原生的交互功能——点击按钮切换状态、点击外部/ESC关闭菜单都能正常工作。

内容的提问来源于stack exchange，提问作者alexandre-mace