本文是基于Ant design Pro 2.0做的笔记,官方提供的demo(官方demo下载地址),路由是程序配置的,不能满足项目需求,所以在研究过程中,把所遇到的问题,做一个笔记,最终效果图如下:

 

一:需求描述

  1 从接口获取菜单,替换默认demo的菜单。

     由于只是测试,所以并没有使用service去调用接口,而是在model层设置菜单数组,菜单数组结构如下:

[{"id": "10", "name": "美食", "parentId": "父节点id", "isShow": "1",locale: "menu.ms"},{ "id": "100", "name": "中餐", "parentId": "10", "isShow": "1", href: "xxx", path: "xxx", locale: "menu.test.zc" },{ "id": "1001", "name": "川菜", "parentId": "100", "isShow": "1", href: "xx", path: "xx", component: "xx", locale: "menu.test.zc.M1001" },]

  2 修改默认布局

          默认布局顶部是没有菜单项的,我重新定义了布局,布局js取名为NewLayout.js,顶部js取名为NewHeaderView.js,因为我重新创建了NewLayout.js,所以需要修改config/router.config.js的布局配置.

export default [{
    path: '/',
    component: '../layouts/NewLayout',//将BasicLayout更改为NewLayout
}]

       

修改NewLayout.js对顶部菜单的引用
 const layout = (
    <Layout>
        {isTop && !isMobile ? null : (
            <SiderMenu
                logo={logo}
                Authorized={Authorized}
                theme={navTheme}
                onCollapse={this.handleMenuCollapse}
                menuData={menuData}
                isMobile={isMobile}
                {...this.props} />
        )}
        <Layout
            style={{
                ...this.getLayoutStyle(),
                minHeight: '100vh',
            }}>
            <div style={{ height: "100px", background: "#fff" }}>
                <NewHeaderView {...this.props} />
            </div>

            <Content style={this.getContentStyle()}>
                <Authorized
                    authority={routerConfig && routerConfig.authority}
                    noMatch={<Exception403 />}
                >
                    {children}
                </Authorized>
            </Content>
            <Footer />
        </Layout>
    </Layout>
); 

 

       3 创建顶部菜单

          首先需要在NewHeaderView.js,componentDidMount方法调用Model,获取菜单数据。

   dispatch({
       type: "testModel/getMenuData",
       callback: (data) => {
           this.setState({
               topMenuData: data,
           });
   });

         

           创建顶部菜单

     getMenu=(menuData)=>{
        let result = [];
        for(let data of menuData){
            if(data.children){
                let childrenData = this.getMenu(data.children);
                result.push(<SubMenu title={<span className="submenu-title-wrapper"><Icon type="setting" />{data.value}</span>}>{childrenData}</SubMenu>);
               
            }else{
                result.push(<Menu.Item key={data.key}><Icon type="mail" />{data.value}</Menu.Item>);
            }
        }
        return result;
     };

     render() {
        let {topMenuData} = this.state; 
        if(!topMenuData){
            return "";
        }
        console.log(this.TAG,"topMenuData  ",topMenuData);
        let data = [];
        topMenuData.forEach(function(value,index,parData){
            if(value.parentId=="0"){
                data.push({"key":value.id,"value":value.name});
            }
        }); 
        let menuArr = this.getMenu(data); 
        return (
            <Menu
                selectedKeys={[this.state.current]}
                mode="horizontal"
                onClick={this.menuHandleClick}>
                {menuArr}
            </Menu>
        );

    };

 

       4 顶部菜单点击后,切换到当前菜单下,第一个子节点下的第一个菜单界面。

          获取被点击菜单,第一个子节点下的第一个菜单数据。        

  menuHandleClick = (e) => {
       //console.log('NewHeaderView:menuHandleClick ', e);
       this.setState({
           current: e.key,
        });
        const {dispatch} = this.props; 
        let {topMenuData} = this.state; 
        //获取被点击菜单的所有子数据
        const treeData = jsonToTreeJson(topMenuData,e.key);
        //第一个子节点下的第一个菜单数据
        const childJson = getChiledByMenuIndex(treeData);
        console.log(this.TAG, "menuHandleClick_Child:", childJson);
        let param = {key:e.key,url:childJson.url}; 
     //调用model,实现跳转到指定的url dispatch({type:
"testModel/curClickKey",payload:param});   }

         实现界面跳转的model.

    *curClickKey({payload,callback},{call,put}){
            console.log("Model:",payload);
            let curClickKey = payload.key;
            yield put({
                type:"setCurClickKey",
                payload:curClickKey,
            });
            yield put(routerRedux.replace(payload.url || '/'));
        }


    reducers: { 
        setCurClickKey(state, action) { 
            return {
                ...state,
                curClickKey: action.payload,
            }
        },
    }

       5 修改本地路由配置文件(config/router.config.js),由于是多级菜单 ,注意菜单数组的格式。

{ path: '/', redirect: '/test/zc/M1001' },
      {
        path:"/test",
        name: 'test',
        icon: 'dashboard',
        routes:[{
          path:"/test/zc",
          name:"zc",
          routes:[{
            path: '/test/zc/M1001',
            name: 'analysis',
            component: './test/zc/M1001',
          },{
            path: '/test/zc/M1002',
            name: 'analysis',
            component: './test/zc/M1002',
          }]
        },{
          path:"/test/xc",
          name:"xc",
          routes:[{
            path: '/test/xc/M1003',
            name: 'analysis',
            component: './test/xc/M1003',
          },{
            path: '/test/xc/M1004',
            name: 'analysis',
            component: './test/xc/M1004',
          }]
        },{
          path:"/test/fj",
          name:"fj",
          routes:[{
            path: '/test/fj/M1005',
            name: 'analysis',
            component: './test/fj/M1005',
          },{
            path: '/test/fj/M1006',
            name: 'analysis',
            component: './test/fj/M1006',
          }]
        },{
          path:"/test/ly",
          name:"ly",
          routes:[{
            path: '/test/ly/M1007',
            name: 'analysis',
            component: './test/ly/M1007',
          },{
            path: '/test/ly/M1008',
            name: 'analysis',
            component: './test/ly/M1008',
          }]
        },{
          path:"/test/yk",
          name:"yk",
          routes:[{
            path: '/test/yk/M1009',
            name: 'analysis',
            component: './test/yk/M1009',
          },{
            path: '/test/yk/M1010',
            name: 'analysis',
            component: './test/yk/M1010',
          }]
        },{
          path:"/test/aqy",
          name:"aqy",
          routes:[{
            path: '/test/aqy/M1011',
            name: 'analysis',
            component: './test/aqy/M1011',
          },{
            path: '/test/aqy/M1012',
            name: 'analysis',
            component: './test/aqy/M1012',
          }]
        }]
      }

    以上是做的笔记,如有错误,请指出来, 完整代码下载地址:https://github.com/jlq023/react_remote_get_menu