react左侧菜单实现

实现 React 左侧菜单的步骤

使用 React 和常见 UI 库（如 Ant Design 或 Material-UI）可以快速实现左侧菜单功能。以下是两种主流实现方式：

使用 Ant Design 的 Menu 组件

安装 Ant Design：

npm install antd

引入 Menu 组件和样式：

import { Menu } from 'antd';
import 'antd/dist/antd.css';

基本菜单结构示例：

const items = [
  { label: '首页', key: 'home' },
  { label: '产品', key: 'products', children: [
    { label: '列表', key: 'product-list' },
    { label: '分类', key: 'categories' }
  ]},
  { label: '用户管理', key: 'users' }
];

function App() {
  return (
    <div style={{ width: 256 }}>
      <Menu 
        mode="inline"
        items={items}
        defaultSelectedKeys={['home']}
      />
    </div>
  );
}

使用 Material-UI 的 Drawer 组件

安装 Material-UI：

npm install @mui/material @emotion/react @emotion/styled

实现可折叠抽屉式菜单：

import { Drawer, List, ListItem, ListItemText } from '@mui/material';

function App() {
  return (
    <Drawer variant="permanent" anchor="left">
      <List>
        <ListItem button>
          <ListItemText primary="首页" />
        </ListItem>
        <ListItem button>
          <ListItemText primary="仪表盘" />
        </ListItem>
      </List>
    </Drawer>
  );
}

自定义实现方案

对于需要完全自定义的场景，可以手动构建：

import { useState } from 'react';

function SideMenu() {
  const [activeItem, setActiveItem] = useState('home');

  const menuItems = [
    { id: 'home', label: '主页' },
    { id: 'settings', label: '设置' }
  ];

  return (
    <div className="side-menu">
      {menuItems.map(item => (
        <div 
          key={item.id}
          className={`menu-item ${activeItem === item.id ? 'active' : ''}`}
          onClick={() => setActiveItem(item.id)}
        >
          {item.label}
        </div>
      ))}
    </div>
  );
}

配套 CSS 示例：

.side-menu {
  width: 200px;
  background: #f0f0f0;
}
.menu-item {
  padding: 12px;
  cursor: pointer;
}
.menu-item.active {
  background: #1890ff;
  color: white;
}

功能扩展建议

• 添加路由功能（react-router-dom）：

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

// 在菜单项中替换为 <Link to={/${item.key}}>{item.label}

- 实现多级嵌套菜单时需要管理展开状态：
```jsx
const [openKeys, setOpenKeys] = useState([]);

<Menu
  openKeys={openKeys}
  onOpenChange={keys => setOpenKeys(keys)}
/>

• 响应式处理可使用媒体查询或监听窗口大小变化：

  
  const [collapsed, setCollapsed] = useState(false);

// 在移动端时设置 collapsed={true}