react 模拟从后台获取菜单数据，点击顶部菜单切换界面的笔记

[{\"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\" },]

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

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

   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  ={<span className=\"submenu- -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\"
                 ={this.menuHandleClick}>
                {menuArr}
            </Menu>
        );

    };

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

    *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,
            }
        },
    }

{ 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\',
          }]
        }]
      }