react 模拟从后台获取菜单数据，点击顶部菜单切换界面的笔记
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
版权声明：本文为cq-jiang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。