Optimize BaseMenu component

Author: chachaxw

src/components/SideBar/BaseMenu.tsx

@@ -1,5 +1,5 @@
 import { Icon, Menu } from 'antd';
-import React, { FC, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { getMenuMatches, urlToList } from '../../utils/utils';
 
 import { Link } from 'dva/router';
@@ -14,55 +14,9 @@ export interface MenuItemProps {
   hideInMenu?: boolean;
 }
 
-const MenuItem: FC<MenuItemProps> = (props) => {
-  const { path, icon, name, hideInMenu, ...restProps } = props;
-
-  if (hideInMenu) {
-    return null;
-  }
-
-  return (
-    <Item key={path} {...restProps}>
-      <Link to={path}>
-        {icon && <Icon type={icon} />}
-        <span>{name}</span>
-      </Link>
-    </Item>
-  );
-};
-
-const SubMenuGroup: FC<MenuItemProps> = (props) => {
-  const { name, icon, path, hideInMenu, children, ...restProps } = props;
-
-  if (hideInMenu) {
-    return null;
-  }
-
-  return (
-    <SubMenu
-      key={path}
-      {...restProps}
-      title={
-        icon ? (
-          <span>
-            <Icon type={icon} />
-            <span>{name}</span>
-          </span>
-        ) : name
-      }
-    >
-      {children && children.length ? children.map((item: MenuItemProps) => {
-        return item.children ? <SubMenuGroup key={item.path} {...item} /> :
-          <MenuItem key={item.path} {...item} />;
-      }) : null}
-    </SubMenu>
-  );
-};
-
 interface InternalProps {
   location: Location;
   menu: MenuItemProps[];
-  style?: object;
   collapsed: boolean;
   className?: string;
   flatMenuKeys: string[];
@@ -84,9 +38,48 @@ class BaseMenu extends PureComponent<InternalProps> {
     return urlToList(pathname).map((path: string) => getMenuMatches(flatMenuKeys, path).pop()) as string[];
   }
 
+  public renderMenuItem(item: MenuItemProps) {
+    const { path, icon, name, hideInMenu } = item;
+
+    if (hideInMenu) {
+      return;
+    }
+
+    return (
+      <Item key={path}>
+        <Link to={path}>
+          {icon && <Icon type={icon} />}
+          <span>{name}</span>
+        </Link>
+      </Item>
+    );
+  }
+
+  public renderSubMenu(props: MenuItemProps) {
+    const { name, icon, path, children } = props;
+
+    return (
+      <SubMenu
+        key={path}
+        title={
+          icon ? (
+            <span>
+              <Icon type={icon} />
+              <span>{name}</span>
+            </span>
+          ) : name
+        }
+      >
+        {children && children.length ? children.map((item: MenuItemProps) =>
+          item.children ? this.renderSubMenu(item) : this.renderMenuItem(item))
+          : null}
+      </SubMenu>
+    );
+  }
+
   public render() {
     const { className, collapsed, theme, openKeys, mode,
-      style, menu, handleOpenChange, location } = this.props;
+      menu, handleOpenChange, location } = this.props;
 
     let selectedKeys = this.getSelectedMenuKeys(location.pathname);
     if (!selectedKeys.length && openKeys) {
@@ -103,16 +96,16 @@ class BaseMenu extends PureComponent<InternalProps> {
     return (
       <Menu
         key="Menu"
-        style={style}
         className={className}
         theme={theme || 'dark'}
         mode={mode || 'inline'}
         selectedKeys={selectedKeys}
+        forceSubMenuRender={true}
         onOpenChange={handleOpenChange}
         {...props}
       >
         {menu && menu.length && menu.map((item: MenuItemProps, index: number) => (
-          item.children ? <SubMenuGroup key={index} {...item} /> : <MenuItem key={index} {...item} />
+          item.children ? this.renderSubMenu(item) : this.renderMenuItem(item)
         ))}
       </Menu>
     );