react如何实现菜单

实现React菜单的方法

在React中实现菜单功能有多种方式，可以根据项目需求选择合适的方法。以下是几种常见的实现方案：

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

通过React的useState钩子管理菜单的展开/收起状态，适合简单场景：

import { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? '关闭菜单' : '打开菜单'}
      </button>
      {isOpen && (
        <ul>
          <li>菜单项1</li>
          <li>菜单项2</li>
          <li>菜单项3</li>
        </ul>
      )}
    </div>
  );
}

使用第三方UI库

主流React UI库如Material-UI、Ant Design都提供了现成的菜单组件：

Material-UI示例：

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

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

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

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button onClick={handleClick}>打开菜单</Button>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>选项1</MenuItem>
        <MenuItem onClick={handleClose}>选项2</MenuItem>
      </Menu>
    </div>
  );
}

实现多级嵌套菜单

对于复杂菜单结构，可以递归渲染子菜单：

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

添加动画效果

使用React Transition Group或Framer Motion为菜单添加平滑动画：

import { motion, AnimatePresence } from 'framer-motion';

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

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>切换菜单</button>
      <AnimatePresence>
        {isOpen && (
          <motion.ul
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
          >
            <motion.li whileHover={{ scale: 1.1 }}>项目1</motion.li>
            <motion.li whileHover={{ scale: 1.1 }}>项目2</motion.li>
          </motion.ul>
        )}
      </AnimatePresence>
    </div>
  );
}

响应式菜单实现

结合媒体查询和状态管理实现响应式菜单：

function ResponsiveMenu() {
  const [isMobileOpen, setIsMobileOpen] = useState(false);
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <nav>
      {isMobile ? (
        <>
          <button onClick={() => setIsMobileOpen(!isMobileOpen)}>☰</button>
          {isMobileOpen && (
            <div className="mobile-menu">
              <a href="/">首页</a>
              <a href="/about">关于</a>
            </div>
          )}
        </>
      ) : (
        <div className="desktop-menu">
          <a href="/">首页</a>
          <a href="/about">关于</a>
        </div>
      )}
    </nav>
  );
}

可访问性优化

遵循WAI-ARIA标准确保菜单可访问：

function AccessibleMenu() {
  const [isOpen, setIsOpen] = useState(false);
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div ref={menuRef}>
      <button
        aria-expanded={isOpen}
        aria-controls="menu-list"
        onClick={() => setIsOpen(!isOpen)}
      >
        菜单
      </button>
      <ul
        id="menu-list"
        role="menu"
        aria-hidden={!isOpen}
        style={{ display: isOpen ? 'block' : 'none' }}
      >
        <li role="menuitem">选项1</li>
        <li role="menuitem">选项2</li>
      </ul>
    </div>
  );
}

以上方法涵盖了从简单到复杂的各种菜单实现场景，可以根据具体需求选择适合的方案或组合使用多种技术。