动态导航栏

使用技术：react

动态导航和树形结构数据类似，可以通过递归来实现

　页面左边的导航栏是通过菜单管理动态展示的。

   

// 定义一个动态加载的组件
class MenuBox extends React.Component{
  constructor(props){
    super(props),
    this.state = {

    }
  }
  render(){
    // 遍历菜单栏
    const loop = data => data.map((item)=>{
　　　 // 如果下面有子菜单
      if(item.children && item.children.length > 0){
        return <SubMenu key={item.href} title={<span>{item.icon? <Icon type={item.icon} />:''}<span>{item.name}</span></span>}>{loop(item.children) }</SubMenu>
      }else{
        return( 
          item.isShow ? 
            (<Menu.Item key={item.href}>
                <Link to={{pathname:item.href}}>
                  {item.icon? <Icon type={item.icon} />:''}
                    <span>{item.name}</span>
                </Link>
            </Menu.Item>) 
          :null
        )
      }
    });
    return (
      <Menu
        mode="inline"
        theme="light"
        defaultSelectedKeys={[this.props.selectKey]}
        defaultOpenKeys={[this.props.selecMenu]}
        style={{ height: '100%', borderRight: 0 }}
        onClick={this.props.onClickFn}
      >
      {loop(this.props.menuList)}
      </Menu>
    )
  }
}

 // 父组件调用子组件

　<MenuBox selecMenu={selecMenu} menuList={menuList} selectKey={selectKey} onClickFn={this.onClickFn}

转载于:https://www.cnblogs.com/zpxm/p/10109084.html