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> ); }
如此，无限层级菜单
查看更多关于【react】的文章
