react ~3.动态无限层级顶部菜单和左边菜单设计制作

2024-03-30 22:02:21

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

如此，无限层级菜单

码农公寓