React中如何扩展鼠标移出事件，使导航子菜单hover时保持展开？

问题核心是你把鼠标离开事件绑定在了导航按钮（icon-button）上，当鼠标移向子菜单时，会触发按钮的onMouseLeave导致子菜单关闭。正确的做法是把鼠标事件绑定在包含导航按钮和子菜单的父容器上，这样只要鼠标在容器范围内（导航项或子菜单），子菜单就保持展开。

修改后的NavItem组件 #

function NavItem(props) {
  const [open, setOpen] = useState(false);

  return (
    <li 
      className='nav-item'
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <p1 className='icon-button'>{props.name}</p1>
      {open && props.children}    
    </li> 
  );
}

修正PlatformMenu的HTML结构 #

你的PlatformMenu里用div包裹li不符合HTML语义规范，应该改成用ul作为下拉菜单容器，调整后如下：

function PlatformMenu() {
  return (
    <ul className='dropdown'>
      <li className='dropdown-item'>
        <a href='#'>Sub-Menu Item</a>
      </li>
    </ul>
  );
}

关键说明 #

• 将onMouseEnter和onMouseLeave移到父元素<li className='nav-item'>上，这个容器包含了导航按钮和子菜单，鼠标进入整个容器时打开子菜单，离开容器时关闭。
• onMouseEnter直接设置setOpen(true)，避免重复触发时的取反操作导致意外关闭。
• 修正PlatformMenu的结构，确保HTML语义正确，避免潜在的样式或行为问题。

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