使用技术: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}