Chakra UI Menu组件下MenuButton出现ID重复与状态异常问题

问题根因 #

Chakra UI 的 Menu 组件设计约定为一个Menu组件对应唯一的MenuButton，所有内部子组件共享同一个Menu上下文状态。你在同一个Menu内放置多个MenuButton时，所有按钮会复用同一套自动生成的ID、绑定同一份激活状态，因此会出现ID重复、点击一个全激活的异常。

解决方案 #

方案1：每个下拉菜单单独包裹Menu（侧边栏场景最常用） #

如果你的侧边栏每个按钮对应独立的下拉选项，给每个MenuButton单独套一层Menu组件即可，每个Menu会生成独立的状态和唯一ID，不会互相冲突：

{/* 第一个独立菜单 */}
<Menu>
  <MenuButton>
    <Flex>
      menubtn
    </Flex>
  </MenuButton>
  <MenuList>
    <MenuItem>对应菜单1的选项</MenuItem>
  </MenuList>
</Menu>

{/* 第二个独立菜单 */}
<Menu>
  <MenuButton>
    <Flex>
      menubtn
    </Flex>
  </MenuButton>
  <MenuList>
    <MenuItem>对应菜单2的选项</MenuItem>
  </MenuList>
</Menu>

{/* 剩余菜单按相同逻辑单独包裹即可 */}

方案2：自定义触发按钮（适合多按钮触发同一个下拉的特殊场景） #

如果你的需求是多个按钮触发同一个下拉列表，不要直接写多个MenuButton，而是通过useMenuContext自定义触发按钮，手动指定唯一ID：

import { Menu, MenuList, MenuItem, useMenuContext, Flex } from '@chakra-ui/react'

// 自定义菜单触发组件
const CustomMenuTrigger = ({ uniqueId, children }) => {
  const { isOpen, onOpen, onClose, getMenuButtonProps } = useMenuContext()
  return (
    <button 
      id={uniqueId} 
      {...getMenuButtonProps({ 
        onClick: isOpen ? onClose : onOpen 
      })}
      className="chakra-menu__menu-button"
    >
      {children}
    </button>
  )
}

// 业务调用代码
<Menu>
  <CustomMenuTrigger uniqueId="menu-btn-1">
    <Flex>menubtn</Flex>
  </CustomMenuTrigger>
  <CustomMenuTrigger uniqueId="menu-btn-2">
    <Flex>menubtn</Flex>
  </CustomMenuTrigger>
  <CustomMenuTrigger uniqueId="menu-btn-3">
    <Flex>menubtn</Flex>
  </CustomMenuTrigger>
  <CustomMenuTrigger uniqueId="menu-btn-4">
    <Flex>menubtn</Flex>
  </CustomMenuTrigger>

  {/* 公共下拉菜单 */}
  <MenuList>
    <MenuItem>公共选项1</MenuItem>
    <MenuItem>公共选项2</MenuItem>
  </MenuList>
</Menu>

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