fix: React 17 findDOMNode is deprecated (#27755)

* fix: use ref instead of findDOMNode

* chore: use fillRef in setAndForwardRef

* chore: use rc-util fillRef instead

* chore: use support ref

* test: removed empty class

* chore: use composeRef instead of setAndForwardRef

components/_util/wave.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { findDOMNode } from 'react-dom';
 import TransitionEvents from '@ant-design/css-animation/lib/Event';
+import { supportRef, composeRef } from 'rc-util/lib/ref';
 import raf from './raf';
 import { ConfigConsumer, ConfigConsumerProps, CSPConfig, ConfigContext } from '../config-provider';
+import { cloneElement } from './reactNode';
 
 let styleForPseudo: HTMLStyleElement | null;
 
@@ -30,6 +31,8 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
     cancel: () => void;
   };
 
+  private containerRef = React.createRef<HTMLDivElement>();
+
   private extraNode: HTMLDivElement;
 
   private clickWaveTimeoutId: number;
@@ -45,7 +48,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
   context: ConfigConsumerProps;
 
   componentDidMount() {
-    const node = findDOMNode(this) as HTMLElement;
+    const node = this.containerRef.current as HTMLDivElement;
     if (!node || node.nodeType !== 1) {
       return;
     }
@@ -112,7 +115,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
       return;
     }
 
-    const node = findDOMNode(this) as HTMLElement;
+    const node = this.containerRef.current as HTMLDivElement;
     if (!e || e.target !== node || this.animationStart) {
       return;
     }
@@ -195,7 +198,14 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
     const { children } = this.props;
     this.csp = csp;
 
-    return children;
+    if (!React.isValidElement(children)) return children;
+
+    let ref: React.Ref<any> = this.containerRef;
+    if (supportRef(children)) {
+      ref = composeRef((children as any).ref, this.containerRef as any);
+    }
+
+    return cloneElement(children, { ref });
   };
 
   render() {

components/anchor/Anchor.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Affix from '../affix';
@@ -100,6 +99,8 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
 
   content: ConfigConsumerProps;
 
+  private wrapperRef = React.createRef<HTMLDivElement>();
+
   private inkNode: HTMLSpanElement;
 
   // scroll scope's container
@@ -253,9 +254,10 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
   };
 
   updateInk = () => {
-    const { prefixCls } = this;
+    const { prefixCls, wrapperRef } = this;
-    const anchorNode = ReactDOM.findDOMNode(this) as Element;
+    const anchorNode = wrapperRef.current;
-    const linkNode = anchorNode.getElementsByClassName(`${prefixCls}-link-title-active`)[0];
+    const linkNode = anchorNode?.getElementsByClassName(`${prefixCls}-link-title-active`)[0];
+
     if (linkNode) {
       this.inkNode.style.top = `${(linkNode as any).offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
     }
@@ -304,7 +306,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
     };
 
     const anchorContent = (
-      <div className={wrapperClass} style={wrapperStyle}>
+      <div ref={this.wrapperRef} className={wrapperClass} style={wrapperStyle}>
         <div className={anchorClass}>
           <div className={`${prefixCls}-ink`}>
             <span className={inkClass} ref={this.saveInkNode} />