如何在React中为无限嵌套导航正确设置样式及实现hover效果？

首先，你的无限嵌套导航结构已经搭建好了，现在要解决的核心问题是默认隐藏子列表，仅在父元素 hover 时显示，且鼠标移到子列表项时父级子列表不会消失。

优先推荐：CSS 原生解决方案（最简单高效） #

不需要修改太多 React 代码，通过 CSS 伪类就能完美解决问题，因为 CSS 的 :hover 伪类会在鼠标位于元素或其任意后代元素上时保持激活状态，刚好符合你的需求。

步骤1：添加 CSS 样式

/* 默认隐藏所有子列表 */
.navLinks {
  display: none;
}

/* 当父级 navItem 被 hover 时，显示它的直接子级 navLinks */
.navItem:hover > .navLinks {
  display: block;
}

为什么这个方案有效？

当你把鼠标移到父级 .navItem 上时，hover 状态激活，子列表显示；当你从父元素移到它的子列表项时，鼠标依然处于 .navItem 的范围内（因为子列表是它的后代元素），所以父元素的 hover 状态不会消失，子列表也就不会被隐藏。

你的 React 组件代码不需要做任何修改，保持原结构即可——CSS 会自动处理显示逻辑。

备选：React 事件控制方案（适合复杂交互场景） #

如果你需要更灵活的交互逻辑（比如延迟隐藏、自定义动画等），可以用 React 的状态结合鼠标事件来控制。之前你尝试的 onMouseEnter/onMouseLeave 思路是对的，但需要处理**鼠标从父元素移到子元素时误触发父元素 mouseLeave**的问题。

修改后的 Links 组件代码：

import { useState } from 'react';
import Link from 'your-router-link-path'; // 替换成你的路由 Link 组件路径

function Links(props) {
  const { link } = props;
  const { title, subLinks, path } = link;
  const [isHovered, setIsHovered] = useState(false);

  // 处理鼠标离开事件，判断是否移到了当前元素的子元素中
  const handleMouseLeave = (e) => {
    const isMovingToChild = e.currentTarget.contains(e.relatedTarget);
    if (!isMovingToChild) {
      setIsHovered(false);
    }
  };

  return (
    <li 
      className="navItem"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={handleMouseLeave}
    >
      <Link to={path}>
        {title}
      </Link>
      {/* 只有当 isHovered 为 true 且存在子链接时才显示 */}
      {subLinks && isHovered && (
        <ul className={`navLinks ${isHovered ? 'active' : ''}`}>
          {subLinks.map((slink, i) => (
            <Links key={i} link={slink} />
          ))}
        </ul>
      )}
    </li>
  );
}

export default function InfiniteNav({ links }){  
  return (
    <nav className="navContainer">
      <ul className="mainNav">
        {links.map((link, i) => <Links key={i} link={link} />)}
      </ul>
    </nav>
  );
}

对应的 CSS 样式：

.navLinks {
  display: none;
}

/* 当 isHovered 为 true 时显示子列表 */
.navLinks.active {
  display: block;
}

这个方案通过 e.currentTarget.contains(e.relatedTarget) 判断鼠标是否移到了当前元素的子元素中，如果是，就不关闭子列表，从而解决了移到子元素时父级子列表消失的问题。

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