react 侧栏二级菜单组件

• Z时代
• 2024-01-10
• 分类：综合

侧边栏菜单组件

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

以上是 react 侧栏二级菜单组件 的全部内容， 来源链接： utcz.com/z/382695.html