如何使用 react + antd 实现后台管理系统的二级菜单

一、效果介绍

 

话不多说，咱们先来上一张图看看效果

需要更多教程，微信扫码即可

 

👆👆👆

别忘了扫码领资料哦【高清Java学习路线图】

和【各学科全套学习视频及配套资料】

 

 

二、准备工作

1、创建项目

npx create-react-app my-react-admin

2、安装需要的依赖

npm i antd -S

3、创建项目基本结构

my-react-admin
	public
	src
		api
			banner.js
			nav.js
			pro.js
			user.js
		components // 公共组件
		layout // 布局结构
			main // 主界面结构
				Breadcrumb.jsx
				Index.jsx
				MainHeader.jsx
				SideMenu.jsx
		router // 路由相关
			menus.js
			RedirectRouterView.jsx
			RouterView.jsx
		store // 状态管理器
			actionCreators
			modules
				common.js
			actionTypes.js
			index.js
		utils // 工具
			request.js
		views // 页面
		App.jsx // 主界面
		index.css // 样式
		index.js // 入口文件
	config-overrides.js // 配置装饰器语法
	package.json // 描述文件

4.设计主界面

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Main from './layout/main/Index'
const App = () => {
  return (
    <Router >
      <Switch>
        <Route path="/" component = { Main } />
      </Switch>
    </Router>
  )
}
​
export default App

5.设计主布局页面

结合UI库的Layout组件 layout/main/Index.jsx

import React from 'react'
import { Layout } from 'antd';
import { connect } from 'react-redux'
import logo from './../../logo.svg'
import SideMenu from './SideMenu'
import RouterView from './../../router/RouterView'
import MainHeader from './MainHeader';
const { Sider, Content } = Layout;
​
@connect(state => {
  return {
    collapsed: state.getIn(['common', 'collapsed'])
  }
})
class Index extends React.Component {
  
  render() {
    const { collapsed } = this.prop