当前位置：首页 > React

react如何实现菜单

2026-01-16 09:19:22React

使用 React 实现菜单的方法

使用状态管理控制菜单显示/隐藏

通过 useState 管理菜单的展开和收起状态，结合点击事件切换状态。

import { useState } from 'react';

function Menu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
      {isOpen && (
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      )}
    </div>
  );
}

使用 CSS 实现动画效果

通过 CSS 过渡或动画让菜单的展开/收起更平滑。

.menu {
  transition: max-height 0.3s ease-out;
  max-height: 0;
  overflow: hidden;
}

.menu.open {
  max-height: 500px;
}

实现多级嵌套菜单

通过递归组件实现无限层级菜单结构。

function MenuItem({ item }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <li>
      <div onClick={() => setIsOpen(!isOpen)}>
        {item.name}
        {item.children && <span>{isOpen ? '−' : '+'}</span>}
      </div>
      {item.children && isOpen && (
        <ul>
          {item.children.map((child) => (
            <MenuItem key={child.id} item={child} />
          ))}
        </ul>
      )}
    </li>
  );
}

使用第三方库简化开发

考虑使用成熟的 React 菜单库如 react-contexify 或 react-menu。

npm install react-contexify

import { Menu, Item, Separator } from 'react-contexify';

function App() {
  return (
    <Menu id="simple">
      <Item onClick={() => alert('Clicked')}>Action 1</Item>
      <Separator />
      <Item disabled>Disabled Action</Item>
    </Menu>
  );
}

响应式菜单实现

结合媒体查询和状态管理，为不同屏幕尺寸提供适配的菜单样式。

const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

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

无障碍访问优化

确保菜单符合 WAI-ARIA 标准，支持键盘导航和屏幕阅读器。

<div role="menu" aria-orientation="vertical">
  <button 
    aria-haspopup="true" 
    aria-expanded={isOpen}
    onClick={toggleMenu}
  >
    Menu
  </button>
  {isOpen && (
    <ul role="menubar">
      <li role="menuitem">Option 1</li>
    </ul>
  )}
</div>

与路由集成

将菜单项与 React Router 集成，实现导航功能。

react如何实现菜单

import { Link } from 'react-router-dom';

function NavMenu() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}