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();
    }
}