diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js index b7782f7c..aafd8c06 100644 --- a/src/components/SiderMenu/SiderMenu.js +++ b/src/components/SiderMenu/SiderMenu.js @@ -9,6 +9,8 @@ import { getDefaultCollapsedSubMenus } from './SiderMenuUtils'; const BaseMenu = React.lazy(() => import('./BaseMenu')); const { Sider } = Layout; +let firstMount = true; + export default class SiderMenu extends PureComponent { constructor(props) { super(props); @@ -17,6 +19,10 @@ export default class SiderMenu extends PureComponent { }; } + componentDidMount() { + firstMount = false; + } + static getDerivedStateFromProps(props, state) { const { pathname, flatMenuKeysLen } = state; if ( @@ -50,7 +56,7 @@ export default class SiderMenu extends PureComponent { }; render() { - const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props; + const { logo, collapsed, onCollapse, fixSiderbar, theme, isMobile } = this.props; const { openKeys } = this.state; const defaultProps = collapsed ? {} : { openKeys }; @@ -64,7 +70,11 @@ export default class SiderMenu extends PureComponent { collapsible collapsed={collapsed} breakpoint="lg" - onCollapse={onCollapse} + onCollapse={(collapse) => { + if (firstMount || !isMobile) { + onCollapse(collapse); + } + }} width={256} theme={theme} className={siderClassName} diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 4e9c2e52..cfcf704d 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -75,15 +75,6 @@ class BasicLayout extends React.Component { }); } - componentDidUpdate(preProps) { - // After changing to phone mode, - // if collapsed is true, you need to click twice to display - const { collapsed, isMobile } = this.props; - if (isMobile && !preProps.isMobile && !collapsed) { - this.handleMenuCollapse(false); - } - } - getContext() { const { location, breadcrumbNameMap } = this.props; return {