重构sideBar的逻辑，去除缓存，使用受控模式开关菜单

zhangyuhuihh · Mar 26, 2020 · 771ea54 · 771ea54
1 parent e5a8494
commit 771ea54
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 40 deletions.
diff --git a/src/views/layOut/LayOut.jsx b/src/views/layOut/LayOut.jsx
@@ -18,7 +18,6 @@ class MyLayOut extends React.Component {
     this.state = {
       collapsed: false
     }
-    this.keyForCollapesd = 0
   }
 
   componentDidMount() {
@@ -88,7 +87,7 @@ class MyLayOut extends React.Component {
           collapsible
           collapsed={this.state.collapsed}
         >
-          <SideMenu keyForCollapesd={this.keyForCollapesd}></SideMenu>
+          <SideMenu></SideMenu>
         </Sider>
         <Layout>
           <Header style={{ background: '#fff', padding: 0 }}>

diff --git a/src/views/layOut/SideMenu.jsx b/src/views/layOut/SideMenu.jsx
@@ -54,31 +54,20 @@ class SideMenu extends React.Component {
     const { pathname } = this.props.history.location
     const ownDefaultOpenKeys = finddefaultOpenKeys(menuList, pathname)
 
-    this.menuList = menuList
     this.state = {
-      menuList: menuList,
-      ownDefaultOpenKeys: ownDefaultOpenKeys,
-      ownDefaultSelectedKeys: [pathname],
-      cacheOpenKeys: ownDefaultOpenKeys,
-      prePropsCollapsed: this.props.keyForCollapesd
+      openKeys: ownDefaultOpenKeys,
+      selectedKeys: [pathname]
     }
   }
 
   static getDerivedStateFromProps(props, state) {
     const { pathname } = props.history.location
-    const { cacheOpenKeys } = state
-    if (pathname !== state.ownDefaultSelectedKeys[0]) {
+    const { openKeys } = state
+    if (pathname !== state.selectedKeys[0]) {
       return {
-        ownDefaultSelectedKeys: [pathname],
-        ownDefaultOpenKeys: _.uniq(
-          finddefaultOpenKeys(menuList, pathname).concat(cacheOpenKeys)
-        )
-      }
-    }
-    if (props.keyForCollapesd !== state.prePropsCollapsed) {
-      return {
-        cacheOpenKeys: [],
-        prePropsCollapsed: props.keyForCollapesd
+        selectedKeys: [pathname],
+        // 这里加了一个concat(openKeys)之后，便不会闪烁
+        openKeys: _.uniq(finddefaultOpenKeys(menuList, pathname).concat(openKeys))
       }
     }
     return null
@@ -106,10 +95,7 @@ class SideMenu extends React.Component {
           )
         } else {
           target[i] = (
-            <Menu.Item
-              key={menuList[i].path}
-              onClick={v => this.handleChangeMenu(v, menuList[i])}
-            >
+            <Menu.Item key={menuList[i].path}>
               <Link to={menuList[i].path}>
                 {menuList[i].icon ? <Icon type={menuList[i].icon} /> : null}
                 <span>{menuList[i].name}</span>
@@ -122,34 +108,37 @@ class SideMenu extends React.Component {
     return target
   }
 
-  handleChangeMenu = (params, menu) => {
-    this.props.history.push(menu.path)
+  handleMenuItemClick = ({ key }) => {
+    this.props.history.push(key)
+    this.setState({
+      selectedKeys: key
+    })
   }
 
   handleSubMenuClick = ({ key }) => {
-    let newdefaultOpenKeys = []
-    const { cacheOpenKeys } = this.state
-    const isHave = cacheOpenKeys.includes(key)
+    const { openKeys } = this.state
+    let newOpenKeys
+    const isHave = openKeys.find(v => v === key)
     if (isHave) {
-      newdefaultOpenKeys = cacheOpenKeys.filter(v => v !== key)
+      newOpenKeys = openKeys.filter(v => v !== key)
     } else {
-      newdefaultOpenKeys = [...cacheOpenKeys, key]
+      newOpenKeys = openKeys.concat(key)
     }
     this.setState({
-      cacheOpenKeys: newdefaultOpenKeys
+      openKeys: newOpenKeys
     })
   }
 
   renderMenu() {
-    return this.iterateMenu(this.state.menuList)
+    return this.iterateMenu(menuList)
   }
 
   render() {
-    const { menuList, ownDefaultOpenKeys, ownDefaultSelectedKeys } = this.state
+    const { selectedKeys, openKeys } = this.state
     const { collapsed } = this.props
     return (
       <React.Fragment>
-        <div className="logo" />
+        <div className='logo' />
         <div
           style={{
             width: '217px',
@@ -159,12 +148,12 @@ class SideMenu extends React.Component {
           }}
         >
           <Menu
-            key={ownDefaultSelectedKeys}
-            defaultSelectedKeys={ownDefaultSelectedKeys}
-            defaultOpenKeys={ownDefaultOpenKeys}
-            mode="inline"
-            theme="dark"
+            selectedKeys={selectedKeys}
+            openKeys={openKeys}
+            mode='inline'
+            theme='dark'
             collapsed={collapsed}
+            onClick={this.handleMenuItemClick}
           >
             {this.iterateMenu(menuList)}
           </Menu>