react侧边栏

最新推荐文章于 2024-08-10 07:26:11 发布

Eternal-memory

最新推荐文章于 2024-08-10 07:26:11 发布

阅读量973

点赞数

分类专栏： react 文章标签： react.js node.js javascript

本文链接：https://blog.csdn.net/liuxin_1991/article/details/120139313

版权

本文详细介绍了如何使用 React.js 开发一个功能完善的侧边栏组件，包括基本结构、状态管理、事件处理和响应式设计。通过实例代码，读者可以了解到React组件化的思想以及与node.js和javascript的配合使用。

摘要由CSDN通过智能技术生成

import React from 'react'
import { Layout, Menu } from 'antd';
import './index.css'
import {withRouter} from 'react-router-dom'
import {
  UserOutlined
} from '@ant-design/icons';
const { Sider } = Layout;
const { SubMenu } = Menu

//模拟数组结构
const  menuList = [
  {
    key:"/home",
    title:"首页",
    icon:<UserOutlined />
  },
  {
    key:"/user-manage",
    title:"用户管理",
    icon:<UserOutlined />,
    children:[
      {
        key:"/user-manage/list",
        title:"用户列表",
        icon:<UserOutlined />
      }
    ]
  },
  {
    key:"/right-manage",
    title:"权限管理",
    icon:<UserOutlined />,
    children:[
      {
        key:"/right-manage/role/list",
        title:"角色列表",
        icon:<UserOutlined />
      },
      {
        key:"/right-manage/right/list",
        title