当前位置：首页 > React

react实现菜单

2026-01-26 15:35:46React

使用 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>
  );
}

使用 CSS 实现动画效果

为菜单添加过渡动画效果，通过 CSS 控制：

react实现菜单

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

.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>
  );
}

使用 Context 实现全局菜单状态

跨组件共享菜单状态时使用 Context API：

react实现菜单

const MenuContext = createContext();

function MenuProvider({ children }) {
  const [activeMenu, setActiveMenu] = useState(null);

  return (
    <MenuContext.Provider value={{ activeMenu, setActiveMenu }}>
      {children}
    </MenuContext.Provider>
  );
}

function MenuItem({ id, children }) {
  const { activeMenu, setActiveMenu } = useContext(MenuContext);

  return (
    <li 
      className={activeMenu === id ? 'active' : ''}
      onClick={() => setActiveMenu(id)}
    >
      {children}
    </li>
  );
}

响应式菜单实现

根据屏幕尺寸自动切换菜单模式：

function ResponsiveMenu() {
  const [isMobile, setIsMobile] = useState(false);
  const [showMenu, setShowMenu] = useState(false);

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

  return (
    <div>
      {isMobile ? (
        <button onClick={() => setShowMenu(!showMenu)}>菜单</button>
      ) : (
        <ul className="desktop-menu">
          {/* 桌面菜单项 */}
        </ul>
      )}

      {isMobile && showMenu && (
        <ul className="mobile-menu">
          {/* 移动菜单项 */}
        </ul>
      )}
    </div>
  );
}

使用第三方库实现复杂菜单

对于复杂需求可以使用现成的 React 菜单库：

npm install react-contextmenu

import { ContextMenu, MenuItem } from 'react-contextmenu';

function App() {
  return (
    <div>
      <div id="target">右键点击这里</div>
      <ContextMenu id="menu_id">
        <MenuItem onClick={() => alert('操作1')}>操作1</MenuItem>
        <MenuItem onClick={() => alert('操作2')}>操作2</MenuItem>
      </ContextMenu>
    </div>
  );
}