React实现多元素悬停触发下拉菜单布局的问题求解

你当前重复硬编码每个菜单的事件和判断逻辑的写法维护性很差，用配置遍历+统一事件绑定的方式可以一次性覆盖所有7个菜单的交互，不需要重复写逻辑。

具体实现步骤 #

• 抽离菜单配置
  把所有导航菜单的id、标题、下拉内容统一存在数组里，后续增删菜单只需要改配置，不用动渲染逻辑：

  const menuConfig = [
    { id: 1, title: "news & events", dropdownContent: <div>新闻活动下拉内容</div> },
    { id: 2, title: "store", dropdownContent: <div>商城下拉内容</div> },
    { id: 3, title: "community", dropdownContent: <div>社区下拉内容</div> },
    // 剩余4个菜单按相同格式补全即可，总计7个
  ];
  

• 保留原有状态，抽离统一事件方法
  不需要新增额外状态，复用你现有的selectedMenu，把事件处理抽成公共方法：

  const [selectedMenu, setSelectedMenu] = useState(null);
  
  const showMenu = (menuId) => setSelectedMenu(menuId);
  const hideMenu = () => setSelectedMenu(null);
  

• 遍历渲染所有菜单一统绑定事件
  不要手写7份重复的菜单结构，通过数组map遍历生成，所有交互逻辑自动复用：

  {menuConfig.map(menu => (
    <div
      className="col-2"
      key={menu.id}
      // 把鼠标进入/离开事件统一绑在最外层容器上，子元素会自动冒泡触发
      onMouseEnter={() => showMenu(menu.id)}
      onMouseLeave={hideMenu}
    >
      <div className="wrapper">
        <li className="select-none bot_line">{menu.title}</li>
      </div>
      {/* 直接切换className适配你写好的hidden/visible样式，不用条件渲染卸载节点 */}
      <div className={`bot_menu ${selectedMenu === menu.id ? 'visible' : 'hidden'}`}>
        {menu.dropdownContent}
      </div>
    </div>
  ))}
  

注意事项 #

• 不要把onMouseLeave绑在内部下拉菜单上，直接绑在最外层col-2容器上即可：下拉菜单属于col-2的子元素，鼠标从导航项移动到下拉菜单的过程中不会触发离开事件，能避免你原来写法里容易出现的鼠标移到下拉菜单就意外收起的bug。
• 如果出现鼠标移动到下拉菜单过程中菜单闪烁的问题，检查CSS里col-2和bot_menu之间有没有留透明间隙，给col-2加position: relative、bot_menu加position: absolute让下拉菜单贴紧导航项底部即可解决。
• 这套逻辑不管多少个菜单项都通用，后续新增、修改菜单只需要改menuConfig数组，不需要调整交互代码。

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