---
title: "@ant-design/pro-layout 移动模式下点击条目以后自动关闭菜单"
date: 2019-11-17T15:22:47.000Z
author: Z.SHINCHVEN
tags: [Ant Design Pro, @ant-design/pro-layout]
canonical: https://atlassc.net/2019/11/18/ant-design-prolayout-hide-menu-drawer-automatically-in-mobile
---
在`Ant Design Pro`工程中修改`src/layouts/BasicLayout.jsx`中的`menuItemRender`这个prop即可实现在移动模式下点击条目以后自动关闭菜单

```jsx
// src/layouts/BasicLayout.jsx
const BasicLayout = props => {
  return (
    <ProLayout
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl) {
          return defaultDom;
        }
        const linkClick = menuItemProps.isMobile === true ? (handleMenuCollapse) : undefined;
        return <Link to={menuItemProps.path} onClick={linkClick}>{defaultDom}</Link>;
      }}
    >
    </ProLayout>
  );
};
```