当前位置：首页 > React

react如何实现菜单

2026-02-11 21:03:10React

实现菜单的基本方法

在React中实现菜单功能可以通过多种方式完成，常见的包括使用原生HTML元素结合状态管理，或借助第三方UI库。以下是几种典型方案：

使用原生HTML和状态管理

通过useState管理菜单的展开/收起状态，结合CSS实现样式控制：

import { useState } from 'react';

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

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

配套的基础CSS：

.menu-container {
  position: relative;
}
.menu-list {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-list li {
  padding: 8px 16px;
  cursor: pointer;
}
.menu-list li:hover {
  background: #f5f5f5;
}

使用第三方UI库

主流UI库如Material-UI、Ant Design等提供预制组件：

react如何实现菜单

Material-UI示例：

import { Menu, MenuItem, Button } from '@mui/material';

function MuiMenu() {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button onClick={handleClick}>Open Menu</Button>
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>Settings</MenuItem>
      </Menu>
    </div>
  );
}

实现多级嵌套菜单

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

react如何实现菜单

function NestedMenu({ items }) {
  return (
    <ul className="nested-menu">
      {items.map((item) => (
        <li key={item.id}>
          {item.label}
          {item.children && <NestedMenu items={item.children} />}
        </li>
      ))}
    </ul>
  );
}

可访问性优化

遵循WAI-ARIA标准增强无障碍支持：

<div role="menu" aria-orientation="vertical">
  <button 
    aria-haspopup="true" 
    aria-expanded={isOpen}
    aria-controls="menu-list"
  >
    Menu
  </button>
  <ul id="menu-list" role="menubar">
    <li role="menuitem">Option 1</li>
  </ul>
</div>

动画过渡效果

使用CSS Transition或React Transition Group：

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={isOpen}
  timeout={300}
  classNames="menu"
  unmountOnExit
>
  <ul className="menu">
    {/* menu items */}
  </ul>
</CSSTransition>

配套CSS：

.menu-enter {
  opacity: 0;
  transform: translateY(-10px);
}
.menu-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 300ms;
}
.menu-exit {
  opacity: 1;
}
.menu-exit-active {
  opacity: 0;
  transition: all 300ms;
}