antd+react 左侧导航栏标准component

2019-10-09 admin

// 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 ? 'logo':'login'}>
                <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;

[转载]原文链接:https://segmentfault.com/a/1190000020627751

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-76971.html

文章标题:antd+react 左侧导航栏标准component

相关文章
Vue Anchor(锚点)组件 导航锚点
Vue Anchor(锚点)组件 导航锚点 iview 3.x框架中新添了一个Anchor(锚点组件),用这个组件去做页面的分类导航正好合适,但是苦于官方文档太过抽象研究了一整天,才勉强可以在项目中应用。下面是我研究后的一点总结: ...
2018-10-15
#react-native# Error: Command failed: gradlew.bat installDebug
这篇文章主要解决react-native中遇到的bug。 编译并运行 React Native 应用之前我们可以使用下面的方法清理gradlew 和之前的构建文件。 Error: Command failed: gradlew.bat in...
2019-02-28
layui实现左侧菜单点击右侧内容区显示
layui这个前端框架对后端人员来说提供了极大的方便,很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了,刚好最近需要开发一个后台管理项目,就拿layui来进行学习和实践. 还没有接触到的同学可以先通读一遍文档,这样在遇到问题的时...
2018-04-26
antd-mobile按需加载样式和自定义样式
引入css的样式的两种方式 在入口处引入样式 &#x2F;&#x2F; 一般入口文件是index.js import &#x27;antd-mobile&#x2F;dist&#x2F;antd-mobile.css&#x27;; &#x2...
2017-12-25
vue下使用 pdf.js 预览 和 打印 PDF文档 兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过直接打开pdf文件, 但事实上直接打开p...
2018-06-06
Vue 动态路由的实现(后台传递路由,前端拿到并生成侧边栏)
地狱空荡荡,师兄在土创。虽然土,但是可以疗伤。 前言 vue项目实现动态路由的方式大体可分为两种: 1.前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 详情可参阅花裤衩大佬的项目手把手…,我当时看这个...
2018-06-29
JavaScript在浏览器标题栏上显示当前日期和时间的方法
本文实例讲述了JavaScript在浏览器标题栏上显示当前日期和时间的方法,分享给大家供大家参考。具体如下: 将这段脚本放到head区即可: &lt;script language=&quot;JavaScript&quot;&gt; &l...
2017-03-21
一个适合新手的react小demo
之前一直都是在用vue,这两个月换了个公司,不过现在又离职了,这里什么框架都用, vue、angular、react,一般公司都是选二项技术去开发已经就够了, 要不是vue+angular或是react+angular个人觉得用了vue还来...
2018-01-11
React水印组件,支持图片水印,文字水印
React水印组件,支持图片水印,文字水印。 安装 npm i --save react-watermark-module 用法 import ReactWatermark from &#x27;react-watermark-modul...
2018-01-09
webpack入门+react环境配置
本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g creat...
2017-03-20
回到顶部