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

一、效果介绍

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

二、准备工作

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 (

)

}

​

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.props

console.log('11', collapsed)

return (

{ collapsed ? null : JD_ADMIN_PRO }

{/* {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {className: 'trigger',onClick: this.toggle,})} */}

className="site-layout-background"

style={{

margin: '24px 16px',

padding: 24,

minHeight: 280,

position: 'relative'

}}

>

);

}

}

​

export default Index

6.设计路由

router/menus.js

import React, { lazy } from 'react'

import {

HomeOutlined,

PictureOutlined,

MenuOutlined,

PicLeftOutlined,

SwapLeftOutlined,

BorderTopOutlined,

ClockCircleOutlined,

UserOutlined,

AppstoreOutlined

} from '@ant-design/icons'

const menus = [

{

path: '/',

redirect: '/home',

meta: { // 该路由不出现在左侧菜单栏 hidden: true

}

},

{

path: '/home',

title: '系统首页',

icon: ,

component: lazy(() => import('./../views/home/Index'))

},

{

path: '/bannermanager',

title: '轮播图管理',

icon: ,

redirect: '/bannermanager/list',

children: [

{

path: '/bannermanager/list',

title: '轮播图列表',

icon: ,

component: lazy(() => import('./../views/banner/Index'))

},

{

path: '/bannermanager/add',

title: '添加轮播图',

icon: ,

component: lazy(() => import('./../views/banner/Add')),

meta: {

hidden: true

}

}

]

},

{

path: '/navigatormanager',

title: '快捷导航管理',

icon: ,

redirect: '/navigatormanager/list',

children: [

{

path: '/navigatormanager/list',

title: '导航列表',

icon: ,

component: lazy(() => import('./../views/navigator/List'))

},

{

path: '/navigatormanager/category',

title: '导航分类',

icon: ,

component: lazy(() => import('./../views/navigator/Category'))

},

{

path: '/navigatormanager/hlist',

title: '首页导航',

icon: ,

component: lazy(() => import('./../views/navigator/HomeList'))

}

]

},

{

path: '/hmanager',

title: '首页数据管理',

icon: ,

redirect: '/hmanager/seckilllist',

children: [

{

path: '/hmanager/seckilllist',

title: '首页秒杀列表',

icon: ,

component: lazy(() => import('../views/homedata/SeckillList'))

},

{

path: '/hmanager/recommentlist',

title: '首页推荐列表',

icon: ,

component: lazy(() => import('../views/homedata/RecommentList'))

}

]

},

{

path: '/usermanager',

title: '用户管理',

icon: ,

redirect: '/usermanager/list',

children: [

{

path: '/usermanager/list',

title: '用户列表',

icon: ,

component: lazy(() => import('./../views/user/List'))

},

{

path: '/usermanager/register',

title: '注册用户',

icon: ,

component: lazy(() => import('./../views/user/RegisterUser'))

},

]

},

{

path: '/productmanager',

title: '商品管理',

icon: ,

redirect: '/productmanager/list',

children: [

{

path: '/productmanager/list',

title: '商品列表',

icon: ,

component: lazy(() => import('./../views/product/List'))

},

{

path: '/productmanager/sortlist',

title: '筛选商品',

icon: ,

component: lazy(() => import('../views/product/SortList'))

},

]

},

{

path: '/setting',

title: '设置',

icon: ,

component: lazy(() => import('../views/setting/Index')),

meta: { // 该路由不出现在左侧菜单栏 hidden: true

}

}

]

​

export default menus

7.设计路由渲染组件

router/RouterView.jsx

import React, { Suspense } from 'react'

import { Spin } from 'antd'

import { Switch, Route } from 'react-router-dom'

import RedirectRouterView from './RedirectRouterView'

import menus from './menus'

function RouterView() {

const renderRoute = (menus) => {

return menus.map(item => {

if (item.children) {

return renderRoute(item.children)

} else {

return item.path === '/' ? null :

path={ item.path }

key={item.path}

exact

component = { item.component } />

}

})

}

return (

} >