react 侧栏二级菜单组件

侧边栏菜单组件

component 下新建menu文件,menu下建index.jsx和subitem.jsx

index.jsx

import React, { Component } from 'react';
import {NavLink} from 'react-router-dom'
import SubItem from './subitem'

export default class Menu extends React.Component {
  constructor(props,context){
    super(props,context)
    this.state = {
      menus:[
      {name:'首页',icon:'icon-shouye',show:true,link:'/'},
      {name:'公告管理',icon:'icon-gonggao',show:true,link:'/noticelist'},
      {name:'人事管理',icon:'icon-yonghu2',show:true,link:'',
      submenu:[
        {name:'员工档案',link:'/hrmanage/employeefiles',show:true},
        {name:'请假申请',link:'/hrmanage/leave',show:true},
      ]},
      {name:'组织架构',icon:'icon-zuzhi1',show:true,link:'/organization'},
      {name:'系统管理',icon:'icon-xitong2',show:true,link:'',
      submenu:[
        {name:'权限设置',link:'/systemset/authorize',show:true},
      ]
    },
      ]
    }
  }

  render() {
    let self = this;
    return (
      <div className="Menu">
        <ul>
          {
              self.state.menus.map(function(item,index){
                  return <li key={index}
              onClick={self.linktosonpage.bind(self,item,index)}>
        {/*如果有二级菜单就显示右边的icon*/} <i className={`iconfont ${item.icon}`}></i>{item.name}<i className={`youjiantou ${item.submenu?'iconfont icon-youjiantou':''} ${item.show?'rotate':''}`}></i> {item.submenu ?<SubItem isshow={item.show} items={item.submenu} />:'' } </li> }) } </ul> </div> ) } linktosonpage(item,index){ if(item.link){ // item.link是子菜单的路由地址 location.replace(`#${item.link}`); // this.props.history.push(item.link) // 用这个报错Cannot read property 'push' of undefined }else{ let that = this; let data = that.state.menus; data[index].show = !data[index].show that.setState({ menus:data }) } } }

subitem.jsx

import React, { Component } from 'react';
import { Link } from 'react-router-dom'

export default class SubItem extends React.Component  {

    render(){
        let self = this;
        return(
            <div className="SubItem" className={this.props.isshow?'':'hide'}>
              {
                  this.props.items.map(function(i,subindex){
                      return <div className="item" key={subindex} onClick={self.stoppropgation.bind(self)}>
                      <Link to={i.link}>{i.name}</Link>
                      </div>
                  })
              }
            </div>
            )
    }

    stoppropgation(e){
        e.stopPropagation();
    }
}

 

posted @ 2019-01-17 15:41  c-137Summer  阅读(3661)  评论(0编辑  收藏  举报