mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

fix: React 17 findDOMNode is deprecated (#27755)

Browse Source 
* 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
This commit is contained in:
Hossein Mohammadi 2020-11-16 12:16:46 +03:30 committed by GitHub
parent 56b3c7539f
commit 4b1000fb7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/_util/wave.tsx
View File

@ -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() {

12
components/anchor/Anchor.tsx
View File

@ -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 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<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} />