react ~3.动态无限层级顶部菜单和左边菜单设计制作
作者:互联网
1.在整个项目制作之前,选择了antd作为react的组件库
所以在做菜单时,选择了layout布局样式
<Layout> <Header> <HeaderMenu headlist={this.state.headlist} user={this.props.userName} headname={this.state.headname} leftMenu={this.leftMenu}//子页面传入的方法数据 /> </Header> <Layout> <Sider> <LeftMenu leftlist={this.state.leftlist} /> </Sider> <Content style={{margin:'28px 20px 0px 20px'}}> {this.props.children} </Content> </Layout> </Layout>
这样就有了一个整体的布局样式
2.无限层级菜单制作
顶部菜单和左边菜单,我都做成了一个组件<HeaderMenu/>,<LeftMenu/>
顶部菜单放置主要菜单,左边放置菜单项及子菜单项......等
在登陆的时候就读取了菜单的接口,返回了菜单的树结构对象数据
利用这个树结构构建
menuId: "0" name: "开放平台后台管理系统" sort: "0" sub: [,…] 0: {menuId: "100001100000000000", parentId: "0", name: "运营管理", path: "/operation/product", sort: "100",…} menuId: "100001100000000000" name: "运营管理" parentId: "0" path: "/operation/product" sort: "100" sub: [{menuId: "100001100100000000", parentId: "100001100000000000", name: "产品订阅审核",…},…] 0: {menuId: "100001100100000000", parentId: "100001100000000000", name: "产品订阅审核",…} 1: {menuId: "100001100200000000", parentId: "100001100000000000", name: "用户管理",…} 2: {menuId: "100001100300000000", parentId: "100001100000000000", name: "实名认证审核",…} 3: {menuId: "100001100400000000", parentId: "100001100000000000", name: "CFCA证书申请审核",…} 4: {menuId: "100001100500000000", parentId: "100001100000000000", name: "系统公告", path: "/operation/notice",…} 1: {menuId: "100001200000000000", parentId: "0", name: "接入管理", path: "/portalBack/business_management",…} .................
3.遍历该数据结构,获取主菜单使用的antd的menu组件,
<Menu onClick={this.handleClick.bind(this)} selectedKeys={[this.state.current]} mode="horizontal"> { this.props.headlist.map(function (item, index) { return ( <Menu.Item key={item.path} data={item.sub}> {item.name} </Menu.Item> ); }) } </Menu>
将菜单项的数据包裹在一个属性data当中,当点击菜单的时候,执行handleClick方法,
handleClick = (e) => { this.setState({ current: e.key,//设置点击菜单选择时的选择项 });localStorage.setItem('topMenuSelect', e.key);//用localStorage存入确定跳转页面后菜单的选择项
this.props.leftMenu(e.item.props.data);//将菜单项数据传向父页面方法,用于在点击每个菜单的时候,更新左边菜单项, }
4.左边菜单组件的编写
<Menu onClick={this.handleClick.bind(this)} style={{ width: 201, borderBottom: '1px solid #2E3243', fontSize: 14, color: '#C3CEE0', background: 'none', overflow: 'hidden', borderBottom: '0px' }} selectedKeys={[localStorage.getItem('leftMenuSelect')]}//将选择的菜单项存入localStorage是用于切换页面刷新页面数据后确定点击的菜单项 defaultOpenKeys={['sub1']} mode="inline" > { this.props.leftlist.map(function (item, index) { if (item.sub != undefined) { this.cress(item.sub);//如果有菜单项就执行这个方法去循环遍历出菜单,如此无限层级就完成了 } else { return ( <Menu.Item key={item.path} data={item}> <Icon type="menu-unfold" theme="outlined" style={{ marginRight: 14 }} /> {item.name} </Menu.Item> ); } }) } </Menu>handleClick = (e) => { let bbq = []; bbq.push(e.key); localStorage.setItem('leftMenuSelect', bbq);//存入选择的菜单项到localStorage中,用于确定页面跳转后的所属菜单页面 this.props.history.push(e.item.props.data.path);//跳转到事先写好router路径的页面, path里面是前后端对接的地址数据, }
cress(sub, name) {//递归出所有菜单项,及子菜单等 return ( <SubMenu title={ <span className="submenu-title-wrapper"> <Icon type="menu-unfold" theme="outlined" style={{ marginRight: 14 }} /> {name} </span> }> { sub.map((item) => { if (item.sub != undefined) { this.cress(item.sub, item.name); } else { return ( <Menu.Item key={item.path}>{item.name}</Menu.Item> ); } }) } </SubMenu> ); }
如此,无限层级菜单
标签:菜单,name,menuId,react,item,层级,parentId,sub 来源: https://www.cnblogs.com/sunshineForFuture/p/10342657.html