Replace SubMenu findDOMNode usage.

src/DOMWrap.tsx

@@ -18,6 +18,7 @@ interface DOMWrapProps {
   visible?: boolean;
   tag?: string;
   style?: React.CSSProperties;
+  forwardedRef: React.RefObject<HTMLElement>;
 }
 
 interface DOMWrapState {
@@ -53,10 +54,16 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
 
   childRef = React.createRef<HTMLElement>();
 
+  setRef(e: HTMLElement) {
+    (this.childRef as any).current = e;
+    (this.props.forwardedRef as any).current = e;
+  }
+
   componentDidMount() {
     this.setChildrenWidthAndResize();
     if (this.props.level === 1 && this.props.mode === 'horizontal') {
       const menuUl = this.childRef.current;
+
       if (!menuUl) {
         return;
       }
@@ -249,6 +256,7 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
     }
 
     const ul = this.childRef.current;
+
     if (!ul) {
       return;
     }
@@ -356,13 +364,14 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
       tag,
       children,
       theme,
+      forwardedRef,
       ...rest
     } = this.props;
 
     const Tag = tag as any;
 
     return (
-      <Tag ref={this.childRef} {...rest}>
+      <Tag ref={this.setRef.bind(this)} {...rest}>
         {this.renderChildren(children)}
       </Tag>
     );

src/MenuItem.tsx

@@ -50,6 +50,7 @@ export interface MenuItemProps
   inlineIndent?: number;
   level?: number;
   direction?: 'ltr' | 'rtl';
+  forwardedRef?: React.RefObject<HTMLElement>;
 }
 
 export class MenuItem extends React.Component<MenuItemProps> {
@@ -235,6 +236,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
           'onMouseEnter',
           'onMouseLeave',
           'onSelect',
+          'forwardedRef',
         ])}
         {...attrs}
         {...mouseEvent}

src/SubMenu.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import Trigger from 'rc-trigger';
 import raf from 'rc-util/lib/raf';
 import KeyCode from 'rc-util/lib/KeyCode';
@@ -102,6 +101,7 @@ export interface SubMenuProps {
 
   motion?: CSSMotionProps;
   direction?: 'ltr' | 'rtl';
+  forwardedRef?: React.RefObject<HTMLElement>;
 }
 
 interface SubMenuState {
@@ -140,12 +140,16 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
       mode: props.mode,
       isOpen: props.isOpen,
     };
+
+    this.menuInstanceRef = React.createRef();
   }
 
   isRootMenu: boolean;
 
   menuInstance: MenuItem;
 
+  menuInstanceRef: React.RefObject<HTMLElement>;
+
   subMenuTitle: HTMLElement;
 
   internalMenuId: string;
@@ -414,7 +418,7 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
     if (!this.subMenuTitle || !this.menuInstance) {
       return;
     }
-    const popupMenu = ReactDOM.findDOMNode(this.menuInstance) as HTMLElement;
+    const popupMenu = this.menuInstanceRef.current;
     if (popupMenu.offsetWidth >= this.subMenuTitle.offsetWidth) {
       return;
     }
@@ -462,6 +466,7 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
       itemIcon: props.itemIcon,
       expandIcon: props.expandIcon,
       direction: props.direction,
+      forwardedRef: this.menuInstanceRef,
     };
   };
 
@@ -664,6 +669,8 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
       ? null
       : this.getMotion(baseProps.mode, baseProps.visible);
 
+    delete props.forwardedRef;
+
     return (
       <li
         {...(props as any)}

src/SubPopupMenu.tsx

@@ -155,6 +155,8 @@ export interface SubPopupMenuProps {
   motion?: CSSMotionProps;
 
   direction?: 'ltr' | 'rtl';
+
+  forwardedRef: React.RefObject<HTMLElement>;
 }
 
 export class SubPopupMenu extends React.Component<SubPopupMenuProps> {
@@ -168,6 +170,7 @@ export class SubPopupMenu extends React.Component<SubPopupMenuProps> {
     focusable: true,
     style: {},
     manualRef: noop,
+    forwardedRef: noop,
   };
 
   constructor(props: SubPopupMenuProps) {
@@ -388,6 +391,7 @@ export class SubPopupMenu extends React.Component<SubPopupMenuProps> {
       expandIcon: childProps.expandIcon || this.props.expandIcon,
       ...extraProps,
       direction: props.direction,
+      forwardedRef: childProps.disabled ? undefined : props.forwardedRef,
     };
     // ref: https://github.com/ant-design/ant-design/issues/13943
     if (props.mode === 'inline' || isMobileDevice()) {