🎉🎉🎉一文全面了解:一个神奇的 react-antd-admin 动态菜单

在React v18中使用React Router v6和Ant Design (antd) v5来动态生成菜单和路由,同时使用MockJS来模拟接口请求菜单数据,可以按照以下步骤进行:

  1. 创建一个React应用: 使用Create React App或您喜欢的其他方式创建一个React应用。

  2. 安装必要的依赖: 在项目目录中运行以下命令来安装React Router v6、Ant Design v5和MockJS:

    kotlin 复制代码
    npm install react-router-dom@6 antd@5 mockjs
  3. 设置MockJS模拟接口数据: 在项目中创建一个名为mock的文件夹,并在其中创建一个用于模拟接口数据的文件,例如menuMock.js

    javascript 复制代码
    // mock/menuMock.js
    import Mock from 'mockjs';
    
    const menuData = Mock.mock({
      'menuList|5-10': [
        {
          'id|+1': 1,
          'name': '@word',
          'path': '@word',
        },
      ],
    });
    
    export default menuData.menuList;

    在应用的入口文件中,如src/index.js,导入MockJS并使用上面创建的模拟数据:

    javascript 复制代码
    // src/index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import menuMock from './mock/menuMock'; // 导入模拟数据
    import Mock from 'mockjs';
    
    Mock.mock('/api/menu', 'get', () => {
      return menuMock;
    });
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
  4. 创建菜单组件和路由: 在项目中创建一个用于渲染菜单和路由的组件,例如MenuRouter.js

    javascript 复制代码
    // src/MenuRouter.js
    import React, { useState, useEffect } from 'react';
    import { Link, Route, Routes } from 'react-router-dom';
    import { Menu, Layout } from 'antd';
    
    const { Sider } = Layout;
    
    function MenuRouter() {
      const [menuData, setMenuData] = useState([]);
    
      useEffect(() => {
        fetch('/api/menu')
          .then((response) => response.json())
          .then((data) => setMenuData(data))
          .catch((error) => console.error('Error fetching menu data:', error));
      }, []);
    
      return (
        <Sider width={200} theme="light">
          <Menu mode="vertical">
            {menuData.map((item) => (
              <Menu.Item key={item.path}>
                <Link to={item.path}>{item.name}</Link>
              </Menu.Item>
            ))}
          </Menu>
          <Routes>
            {menuData.map((item) => (
              <Route
                key={item.path}
                path={item.path}
                element={<div>{item.name} Content</div>}
              />
            ))}
          </Routes>
        </Sider>
      );
    }
    
    export default MenuRouter;
  5. 创建主应用组件: 在项目中创建一个主应用组件,例如App.js

    javascript 复制代码
    // src/App.js
    import React from 'react';
    import { Layout } from 'antd';
    import MenuRouter from './MenuRouter';
    
    const { Content } = Layout;
    
    function App() {
      return (
        <Layout style={{ minHeight: '100vh' }}>
          <MenuRouter />
          <Layout>
            <Content style={{ padding: '16px' }}>
              <h1>Welcome to Your App</h1>
            </Content>
          </Layout>
        </Layout>
      );
    }
    
    export default App;
  6. 启动应用: 最后,在项目根目录中运行应用:

    sql 复制代码
    npm start

    应用将启动并在浏览器中打开,您应该能够看到动态生成的菜单和路由,并且MockJS会模拟接口请求菜单数据。请根据您的需求进一步定制和优化这个基础示例。

react-antd-admin 菜单组件,大家可以详细看这个地址

github.com/KenNaNa/rea...

今天我们就来解析下里面的代码

这段代码是一个React组件,用于生成动态的菜单。让我逐步解析它:

  1. 引入React相关依赖:

    • import React, { useState, memo } from "react";: 导入了React核心库,以及useStatememo两个React Hook。useState用于在函数组件中管理状态,memo用于优化组件性能。
  2. 引入Ant Design和其他相关依赖:

    • import { Menu } from 'antd';: 导入了Ant Design的Menu组件。
    • import type { MenuProps } from "antd";: 导入了Menu组件的类型定义,以便进行类型检查。
    • import { ItemType } from "antd/es/menu/hooks/useItems";: 导入了ItemType,这是Ant Design Menu组件中的一个类型。
  3. 引入其他自定义组件和工具:

    • import IconFont from "../icon";: 导入了一个自定义的IconFont组件。
    • import { NavLink as Link, useLocation } from 'react-router-dom';: 导入了React Router的相关组件,包括NavLinkuseLocation
  4. 定义了一些类型和接口:

    • type MenuItem = Required<MenuProps>['items'][number];: 定义了一个MenuItem类型,它是MenuProps类型中items数组的元素类型。

    • interface IMenuItem { ... }: 定义了一个IMenuItem接口,用于描述菜单项的结构,包括keyiconchildrenlabeltype等属性。

  5. 创建了一个空的routeMap对象,用于将路径映射到对应的名称。

  6. 定义了一个函数 getMenuList(menuList: any[]) 用于生成菜单数据。这个函数接收一个菜单数据的数组作为参数,然后递归地将静态菜单数据和传入的菜单数据合并成一个新的菜单数据数组,同时生成openKeys用于展开子菜单,以及将路径映射到名称的routeMap。最后,返回openKeystempMenuList

  7. 创建了一个名为 DynamicMenu 的函数组件,它接受一个名为 menuData 的参数。

    • 使用 useLocation 获取当前页面的路径,并设置默认的 tempPath 状态。
    • 调用 getMenuList 函数生成菜单数据,得到 openKeystempMenuList
    • 定义了一个 onClick 函数,用于处理菜单项的点击事件。
    • 返回一个 Menu 组件,使用 tempPathopenKeys 设置默认选中的菜单项和展开的子菜单项,并传入生成的菜单数据 tempMenuList
  8. 最后,使用 memo 函数包装了 DynamicMenu 组件,以优化性能。memo 可以阻止组件在没有改变的 props 的情况下重新渲染。

这个组件的主要作用是根据传入的菜单数据生成一个动态的侧边栏菜单,并根据路由进行高亮显示。它还会将路径映射到对应的名称,以供面包屑导航等功能使用。

相关推荐
王解35 分钟前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录36 分钟前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
老码沉思录39 分钟前
React Native 全栈开发实战班 - 第四部分:用户界面进阶之动画效果实现
react native·react.js·ui
我不当帕鲁谁当帕鲁40 分钟前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂44 分钟前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_6 小时前
【Linux】多线程(概念,控制)
linux·运维·前端