react 模拟从后台获取菜单数据,点击顶部菜单切换界面的笔记
本文是基于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