diff --git a/src/views/layOut/LayOut.jsx b/src/views/layOut/LayOut.jsx index d1d5034..e7993b6 100644 --- 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} > - + diff --git a/src/views/layOut/SideMenu.jsx b/src/views/layOut/SideMenu.jsx index 47ea409..f21f831 100644 --- 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] = ( - this.handleChangeMenu(v, menuList[i])} - > + {menuList[i].icon ? : null} {menuList[i].name} @@ -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 ( - + {this.iterateMenu(menuList)}