React Hooks实现带延迟下拉菜单的问题排查求助

核心错误排查与修复 #

以下是三处关键问题的修复方案：

1. CSS选择器语法错误 #

默认隐藏下拉菜单的选择器遗漏了类前缀.，导致初始隐藏样式不生效。修正后的CSS：

.bottomUl {
    display: none;
    flex-direction: column;        
    align-items: start;
    justify-content: start;
    margin-top:35px;
    width: 220px;
    height: auto;
    list-style: none;
    font-size: 16px;
    position: absolute;
    transition: 0.2s;
    z-index: 9999;
}

2. 超时ID未持久化导致延迟失效 #

React组件每次渲染时，let timeoutId会被重新声明，清除超时的逻辑完全失效。改用useRef持久化超时ID：

import { useState, useRef } from 'react';

const [hoveredItem, setHoveredItem] = useState(null);
const timeoutId = useRef(null);

const handleMouseEnter = (item) => {
  clearTimeout(timeoutId.current);
  setHoveredItem(item);
};

const handleMouseLeave = () => {
  clearTimeout(timeoutId.current);
  timeoutId.current = setTimeout(() => {
    setHoveredItem(null);
  }, 400);
};

3. 子项hover导致父下拉菜单消失 #

子列表项的onMouseEnter传入了subItem，会让hoveredItem变为子项对象，与父项item不匹配，导致下拉菜单的show类被移除。修改子项事件逻辑，保持hoveredItem为父项：

{item.subItems.map((subItem, subIndex) => (
  <li
    key={subIndex}
    className="f"
    onMouseEnter={() => handleMouseEnter(item)}
    onMouseLeave={handleMouseLeave}
  >
    <Link href={subItem.link}>
      <a rel="noopener noreferrer">{subItem.label}</a>
    </Link>
  </li>
))}

修复后效果验证 #

完成上述修改后：

• 鼠标悬停父菜单项，下拉菜单立即显示
• 鼠标离开父/子菜单区域，延迟400ms后下拉菜单隐藏
• 鼠标从父菜单移至子菜单时，下拉菜单保持显示状态

内容的提问来源于stack exchange，提问作者XAZG Неизвестный