From 4b1000fb7f8dcf4ce1ae0e982c8de2d6cb10a760 Mon Sep 17 00:00:00 2001 From: Hossein Mohammadi Date: Mon, 16 Nov 2020 12:16:46 +0330 Subject: [PATCH] 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 | 18 ++++++++++++++---- components/anchor/Anchor.tsx | 12 +++++++----- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx index e02cb6511f..ae29186513 100644 --- a/components/_util/wave.tsx +++ b/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(); + 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 = this.containerRef; + if (supportRef(children)) { + ref = composeRef((children as any).ref, this.containerRef as any); + } + + return cloneElement(children, { ref }); }; render() { diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index f28a4a6eb0..be21ddc881 100644 --- a/components/anchor/Anchor.tsx +++ b/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(); + private inkNode: HTMLSpanElement; // scroll scope's container @@ -253,9 +254,10 @@ export default class Anchor extends React.Component { - const { prefixCls } = this; - const anchorNode = ReactDOM.findDOMNode(this) as Element; - const linkNode = anchorNode.getElementsByClassName(`${prefixCls}-link-title-active`)[0]; + const { prefixCls, wrapperRef } = this; + const anchorNode = wrapperRef.current; + 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 +