当前位置：首页 > React

react实现menu

2026-01-26 12:40:37React

React 实现 Menu 的方法

使用 React 实现菜单功能可以通过多种方式完成，以下是几种常见的实现方法：

使用原生 HTML 和 CSS

创建一个基本的菜单结构，使用 React 组件渲染菜单项，并通过 CSS 控制样式和交互效果。

import React, { useState } from 'react';
import './Menu.css';

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

  return (
    <div className="menu-container">
      <button className="menu-button" onClick={() => setIsOpen(!isOpen)}>
        Menu
      </button>
      {isOpen && (
        <ul className="menu-list">
          <li className="menu-item">Home</li>
          <li className="menu-item">About</li>
          <li className="menu-item">Contact</li>
        </ul>
      )}
    </div>
  );
};

export default Menu;

对应的 CSS 文件（Menu.css）可以添加样式和动画效果。

使用第三方库（如 React-Menu）

许多第三方库提供了现成的菜单组件，例如 react-menu，可以快速实现功能丰富的菜单。

import React from 'react';
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
import '@reach/menu-button/styles.css';

const CustomMenu = () => {
  return (
    <Menu>
      <MenuButton>Actions</MenuButton>
      <MenuList>
        <MenuItem onSelect={() => alert('Download')}>Download</MenuItem>
        <MenuItem onSelect={() => alert('Copy')}>Copy</MenuItem>
        <MenuItem onSelect={() => alert('Delete')}>Delete</MenuItem>
      </MenuList>
    </Menu>
  );
};

export default CustomMenu;

使用 Material-UI 的菜单组件

Material-UI 提供了 Menu 和 MenuItem 组件，适合需要 Material Design 风格的项目。

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

const MaterialMenu = () => {
  const [anchorEl, setAnchorEl] = useState(null);

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

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

  return (
    <div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
};

export default MaterialMenu;

动态生成菜单项

如果需要从数据动态生成菜单项，可以使用数组映射的方式。

import React, { useState } from 'react';

const DynamicMenu = () => {
  const [isOpen, setIsOpen] = useState(false);
  const menuItems = ['Home', 'Products', 'Services', 'Contact'];

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Menu</button>
      {isOpen && (
        <ul>
          {menuItems.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default DynamicMenu;