具体引入到layout.jsx中如下：
import React, { Component } from "react"; import {Layout, Menu, Icon } from 'antd' import { Link } from 'react-router-dom' import slideBarConfig from "@/layout/slideBarConfig" import Top from '@/components/header' import Contents from "@/layout/content" import Http from '@/api/sendRequestApi' import './index.css'; const { Sider, Footer } = Layout const { SubMenu } = Menu; const MenuItem = Menu.Item; class Container extends Component { constructor(props){ super(props) this.state = { collapsed: false, left: 200, } } toggleCollapsed = () => { let { collapsed, left } = this.state; this.setState({ collapsed: !collapsed, }); if(left === 200){ this.setState({ left: 80, }); }else{ this.setState({ left: 200, }); } } logout = () => { Http.logout().then(() => { sessionStorage.clear(); this.props.history.push("/login"); }); } //处理左侧菜单 getSubmenu = () => { return slideBarConfig.map(item => { if(!item.children || item.children.length === 0){ //如果当前路由没有子路由且该路由的hidden为false或不设置该路由的hidden时则直接显示该路由，若该路由的hidden为true则不显示该路由 if(item.hidden) return false return ( <MenuItem key={item.url}> <Link to={item.url} replace> {/*加一个replace是因为当前路由下的 history 不能 push 相同的路径到 stack 里。只有开发环境存在，生产环境不存在，目前还没看到官方有去掉的意思*/} <Icon type={item.icon} /> <span>{item.name}</span> </Link> </MenuItem> ) }else if(item.children && item.children.length === 1){ if(item.hidden) return false let noHiddenRouter = []; let hiddenRouter = []; item.children.map(v => { if(v.hidden){ hiddenRouter.push(v) }else{ noHiddenRouter.push(v) } return true }) if(hiddenRouter.length > 0){ //当子路由只有一个且该子路由的hidden为true同时其父路由的hidden为false或不设置其父路由的hidden时则显示其父路由 return <MenuItem key={item.url}><Link to={item.url} replace><Icon type={item.icon} /><span>{item.name}</span></Link></MenuItem> } if(noHiddenRouter.length > 0){ //当子路由只有一个且该子路由的hidden为false或不设置该子路由的hidden时则显示其父路由和下拉的子路由 return ( <SubMenu key={item.url} title={<span><Icon type={item.icon} /><span>{item.name}</span></span>}> { noHiddenRouter.map(v => { return <MenuItem key={v.url}><Link to={v.url} replace>{v.name}</Link></MenuItem> }) } </SubMenu> ) } }else if(item.children && item.children.length > 1){ //当当前路由有两个及两个以上子路由时，若两个子路由的hidden都为true时则该路由和其子路由全部隐藏 if(item.hidden) return false let noHiddenRouter = []; item.children.map(v => { if(v.hidden){ return <MenuItem key={item.url}><Link to={item.url} replace><Icon type={item.icon} /><span>{item.name}</span></Link></MenuItem> }else{ noHiddenRouter.push(v) return true } }) if(noHiddenRouter.length > 0){ return ( <SubMenu key={item.url} title={<span><Icon type={item.icon} /><span>{item.name}</span></span>}> { noHiddenRouter.map(v => { return <MenuItem key={v.url}><Link to={v.url} replace>{v.name}</Link></MenuItem> }) } </SubMenu> ) } } return true }); } render() { let selectedKey = this.props.location.pathname; let openKey = ""; for (let menuObj of slideBarConfig) { if (menuObj.children && menuObj.children.length) { for (let menuList of menuObj.children) { if (menuList.url === selectedKey) { openKey = menuObj.url; } } } } let { collapsed, left } = this.state; return ( <div> <Layout> <Sider collapsible trigger={null} collapsed={collapsed}> <Menu theme="dark" mode="inline" defaultOpenKeys={[openKey]} selectedKeys={[selectedKey]}> {this.getSubmenu()} </Menu> </Sider> <Layout className="layout-content" style={{marginLeft: left}}> <Top toggle={this.toggleCollapsed} collapsed={collapsed} logout={this.logout}/> <Contents /> <Footer style={{textAlign: 'center'}}>React-Admin ©2019 Created by 小坏 <a target='_blank' href='http://github.com/zhangZhiHao1996/react-admin-master'>github地址</a></Footer> </Layout> </Layout> </div> ); } } export default Container;