Enhanced meun response

src/routes/Userinfo/Info.js

@@ -1,7 +1,9 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Route, routerRedux, Switch, Redirect } from 'dva/router';
 import { Menu } from 'antd';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
 import styles from './Info.less';
 import { getRoutes } from '../../utils/utils';
 
@@ -17,7 +19,7 @@ const menuMap = {
 @connect(({ user }) => ({
   currentUser: user.currentUser,
 }))
-export default class Info extends PureComponent {
+export default class Info extends Component {
   constructor(props) {
     super(props);
     const { match, location } = props;
@@ -25,10 +27,20 @@ export default class Info extends PureComponent {
     key = menuMap[key] ? key : 'base';
     this.state = {
       selectKey: key,
+      meunMode: 'inline',
     };
   }
+  componentDidMount() {
+    this.resize();
+    window.addEventListener('resize', this.resize);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
   getmenu = () => {
-    return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
+    return Object.keys(menuMap).map(item => (
+      <Item key={item}>{menuMap[item]}</Item>
+    ));
   };
   getRightTitle = () => {
     return menuMap[this.state.selectKey];
@@ -39,6 +51,19 @@ export default class Info extends PureComponent {
       selectKey: key,
     });
   };
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (window.innerWidth > 768 || window.innerWidth < 454) {
+      this.setState({
+        meunMode: 'inline',
+      });
+      return;
+    }
+    this.setState({
+      meunMode: 'horizontal',
+    });
+  }
   render() {
     const { match, routerData, currentUser } = this.props;
     if (!currentUser.userid) {
@@ -48,7 +73,7 @@ export default class Info extends PureComponent {
       <div className={styles.main}>
         <div className={styles.leftmenu}>
           <Menu
-            mode={window.innerWidth < 769 ? 'horizontal' : 'inline'}
+            mode={this.state.meunMode}
             selectedKeys={[this.state.selectKey]}
             onClick={this.selectKey}
           >
@@ -58,16 +83,16 @@ export default class Info extends PureComponent {
         <div className={styles.right}>
           <div className={styles.title}>{this.getRightTitle()}</div>
           <Switch>
-            {
-              getRoutes(match.path, routerData).map(item => (
-                <Route
-                  key={item.key}
-                  path={item.path}
-                  render={props => <item.component {...props} currentUser={currentUser} />}
-                  exact={item.exact}
-                />
-              ))
-            }
+            {getRoutes(match.path, routerData).map(item => (
+              <Route
+                key={item.key}
+                path={item.path}
+                render={props => (
+                  <item.component {...props} currentUser={currentUser} />
+                )}
+                exact={item.exact}
+              />
+            ))}
             <Redirect exact from="/userinfo" to="/userinfo/base" />
             <Redirect to="/exception/404" />
           </Switch>