当前位置：首页 > React

react如何实现菜单

2026-03-31 00:04:57React

实现 React 菜单的常见方法

使用原生 HTML 和 CSS 实现基础菜单
通过 <ul> 和 <li> 结构构建菜单项，结合 CSS 控制样式和交互。例如：

function Menu() {
  return (
    <ul className="menu">
      <li><a href="/home">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  );
}

通过 :hover 或 JavaScript 控制下拉效果。

利用状态管理实现动态菜单
通过 React 的 useState 管理菜单展开/折叠状态：

react如何实现菜单

function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
      {isOpen && (
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      )}
    </div>
  );
}

使用第三方库简化开发

React Router：实现导航菜单的路由功能：

import { Link } from 'react-router-dom';
function NavMenu() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Material-UI 或 Ant Design：提供预构建的菜单组件（如 Menu、Dropdown）。

响应式菜单的实现
通过 CSS Media Query 或 JavaScript 监听窗口大小调整菜单布局：

react如何实现菜单

const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
  const handleResize = () => setIsMobile(window.innerWidth < 768);
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

无障碍（A11Y）优化
为菜单添加键盘导航和 ARIA 属性：

<ul role="menu" aria-label="Main menu">
  <li role="none"><a role="menuitem" href="/">Home</a></li>
</ul>

进阶功能示例

多级嵌套菜单
通过递归组件实现无限层级：

function NestedMenu({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item.name}
          {item.children && <NestedMenu items={item.children} />}
        </li>
      ))}
    </ul>
  );
}

动画过渡效果
使用 CSS 或 React Transition Group 添加展开/关闭动画：

import { CSSTransition } from 'react-transition-group';
<CSSTransition in={isOpen} timeout={300} classNames="fade">
  <ul>{/* 菜单项 */}</ul>
</CSSTransition>