antd+react 左侧导航栏标准component

// src/components/NavLeft/index

import React from 'react'
import { Menu,Icon,Layout } from 'antd';
import { NavLink,withRouter } from 'react-router-dom'
import MenuConfig from './../../config/menuConfig'
import './index.less'

const SubMenu = Menu.SubMenu;
const { Sider } = Layout;
class NavLeft extends React.Component {

state = {
    openKeys:['/kuaishou'],
    currentKey:'',
    collapsed:false
}
rootKeys=[];
onCollapse = async (collapsed) => {
    const currentKey = this.props.location.pathname
    const openKeys=[]
    openKeys.push('/'+currentKey.split('/')[1])
    await this.setState({ 
        collapsed,
        openKeys:!collapsed ? openKeys : [] 
    });
   
  };
handleClick=(item)=>{
    this.setState({
        currentKey:item.key  
    })
}
renderMenu = (data) => {
    return data.map((item) => {
       if(item.children) {
         return (
             <SubMenu 
                title={
                   
                    <span>
                         <Icon type={item.icon}/>                            
                        <span>{item.title}</span>    
                    </span>
                } 
                key={item.key}
             >
                  {this.renderMenu(item.children)}
             </SubMenu>
         )
       }
       return <Menu.Item title={item.title} key={item.key}>
             <NavLink to={item.key}>{item.title}</NavLink>
       </Menu.Item>
       
   })

}
getInitSubKeys=(data)=>{
    return data.map(item =>{
        return this.rootKeys.push(item.key)
    })
}
onOpenChange= openKeys => {
    if(this.state.collapsed){
        return false;
    }
    this.setState({openKeys})
    // const lastOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key)=== -1);
    // if(this.rootKeys.indexOf(lastOpenKey)=== -1) {
    //     this.setState({openKeys:[...this.state.openKeys,openKeys]})
    // }else {
    //     this.setState({
    //         openKeys:lastOpenKey ? [lastOpenKey] : []
    //     })
    // }
}
componentWillMount () { 
    this.MenuTreeNode = this.renderMenu(MenuConfig); 
    this.getInitSubKeys(MenuConfig) 
    const currentKey = this.props.location.pathname
    const openKey='/'+currentKey.split('/')[1]
    this.setState({
        currentKey,
        openKeys:[...this.state.openKeys,openKey]
    })
}

componentWillReceiveProps(nextProps){
    const currenPath = this.props.location.pathname
    const nextPath = nextProps.location.pathname
    if(currenPath !== nextPath){
        this.setState({
            currentKey:nextPath 
        })
    }
}

render() {
    return (
        
        <Sider collapsible 
            collapsed={this.state.collapsed} 
            onCollapse={this.onCollapse}
            className='sider'
            >
            <div className={!this.state.collapsed ? 'collap':'uncollap'}>
                <span className='font'>CDN服务质量数据分析</span>
            </div>
            <Menu 
                className='menu'
                mode='inline'
                theme="dark"
                openKeys={this.state.openKeys}
                selectedKeys={[this.state.currentKey]}
                onOpenChange={this.onOpenChange}
                onClick={this.handleClick}
                >
                {this.MenuTreeNode}      
            </Menu>
        </Sider>
    
    )
}

}
export default withRouter(NavLeft);

// menuConfig
const menuList = [
{
title:'快手',
key:'/kuaishou',
icon:'user',
children:[
{

title:'实时数据',
key:'/kuaishou/real_time'

},
{

title:'离线调优数据支持',
key:'/kuaishou/qos'

},
{

title:'快手播放体验数据',
key:'/kuaishou/vff'

},
{

title:'快手资源下载数据',
key:'/kuaishou/dld'

},
{

title:'快手表格数据',
key:'/kuaishou/table'

}
]
},
{
title:'头条',
key:'/toutiao',
icon:'edit',
children:[
{

title:'节点维度实时数据',
key:'/toutiao/node',

},
{

title:'厂商对比',
key:'/toutiao/cdn_vs'

},
{

title:'头条服务质量日报',
key:'/toutiao/daily'

}
]
},
{
title:'芒果',
key:'/mangguo',
icon:'redo',
children:[
{

title:'邮件各终端及总体趋势',
key:'/mangguo/mail_platforms'

},
{

title:'邮件各地区趋势',
key:'/mangguo/mail_locations'

},
{

title:'邮件各地区趋势easy',
key:'/mangguo/mail_locations_easy'

},
{

title:'pcvideo日报',
key:'/mangguo/pcv_daily'

},
{

title:'ottvideo',
key:'/mangguo/ott_daily'

},
{

title:'日志分析',
key:'/mangguo/user_log_ana'

}
]
},
{
title:'其他点播客户',
key:'/other_customer',
icon:'zoom-in',
children:[
{

title:'秒拍波波视频',
key:'/other_customer/miaopai'

},
{

title:'淘宝小视频',
key:'/other_customer/taobao'

},
{

title:'微博小时数据',
key:'/other_customer/weibo'

},
{

title:'微博日报',
key:'/other_customer/weibo_daily'

},
{

title:'协议栈A/B测试',
key:'/other_customer/ab_test'

},
{

title:'youku直播卡顿区域',
key:'/other_customer/youku_live_impairment_location'

},
{

title:'youku直播卡顿节点',
key:'/other_customer/youku_live_impairment_node'

}
]
},
{
title:'稳定性',
key:'/stability',
icon:'bell',
children:[
{

title:'cpu',
key:'/stability/cpu'

},
{

title:'io',
key:'/stability/io'

},
{

title:'io问题日报',
key:'/stability/io_daily_report'

},
{

title:'网络',
key:'/stability/network'

}
]
},
{
title:'直播',
key:'/live',
icon:'compass',
children:[
{

title:'hls直播',
key:'/live/hls'

}
]
},
{
title:'节点质量',
key:'/iq',
icon:'file-markdown',
children:[
{

title:'节点质量打标',
key:'/iq/real_node_tagging'

},
{

title:'质量差节点',
key:'/iq/bad_network'

},
{

title:'节点网络质量',
key:'/iq/network'

},
{

title:'TOP域名SLA指标',
key:'/iq/top_domain_sla'

},
{

title:'回源策略建议',
key:'/iq/l1_l2_strategy'

},
{

title:'路由宝探测数据',
key:'/iq/luyoubao'

},
{

title:'节点硬件数据',
key:'/iq/node_tagging'

},
{

title:'节点传输质量预估',
key:'/iq/network_trans_qos'

}
]
},
{
title:'L1服务质量',
key:'/l1_qos',
icon:'file-text',
children:[
{

title:'码率慢速比',
key:'/l1_qos/bitrate_slow'

},
{

title:'中断率',
key:'/l1_qos/abort'

},
{

title:'首包和服务处理时间',
key:'/l1_qos/fbt_st'

},
{

title:'L1回源质量',
key:'/l1_qos/l1_l2'

}
]
}
]
export default menuList;

// css 代码 （主要是导航收缩切换动画）
.sider{

height: calc(100vh);
overflow: scroll;
&::-webkit-scrollbar {display:none}
.collap{
    position: fixed;
    height: 80px;
    line-height: 80px;
    overflow: hidden;
    background:rgb(192, 147, 22);
    text-align: center;
    animation:extend .2s ease;
    -webkit-animation:extend .2s ease;
    .font {
        color: #ffffff;
        font-size: 15px;
        padding: 0 24.5px;
    }
}
.uncollap{
    position: fixed;
    height: 80px;
    width: 80px;
    line-height: 80px;
    background: rgb(192, 147, 22);
    overflow: hidden;
    animation:shrink .2s ease;
    -webkit-animation:shrink .2s ease;
    .font {
        color: #ffffff;
        font-size: 12px;
    }
}
.menu {
    padding-top: 80px;
}

.ant-layout-sider-trigger{
    background: rgb(10, 63, 83);
}

}

@keyframes extend
{
from {width:80px;}
to {width:200px;}
}

@-webkit-keyframes extend
{
from {width:80px;}
to {width:200px;}
}

@keyframes shrink
{
from {width:200px;}
to {width:80px;}
}

@-webkit-keyframes shrink
{
from {width:200px;}
to {width:80px;}
}