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

如此，無限層級菜單