javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): eliminate use of deprecated findDOMNode, resolves #20972

Browse Source
This commit is contained in:
Ely Lucas
2020-11-25 14:21:12 -07:00
committed by GitHub
parent ea52db66f0
commit 5275332e43
3 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/react/src/components/createComponent.tsx
View File

@ -1,6 +1,5 @@
import { AnimationBuilder } from '@ionic/core';
import React from 'react';
import ReactDom from 'react-dom';
import { NavContext } from '../contexts/NavContext';
import { RouterOptions } from '../models';
@ -25,9 +24,13 @@ export const createReactComponent = <PropType, ElementType>(
const displayName = dashToPascalCase(tagName);
const ReactComponent = class extends React.Component<IonicReactInternalProps<PropType>> {
context!: React.ContextType<typeof NavContext>;
ref: React.RefObject<HTMLElement>;
constructor(props: IonicReactInternalProps<PropType>) {
super(props);
// If we weren't given a ref to forward, we still need one
// in order to attach props to the wrapped element.
this.ref = React.createRef();
}
componentDidMount() {
@ -35,7 +38,9 @@ export const createReactComponent = <PropType, ElementType>(
}
componentDidUpdate(prevProps: IonicReactInternalProps<PropType>) {
const node = ReactDom.findDOMNode(this) as HTMLElement;
// Try to use the forwarded ref to get the child node.
// Otherwise, use the one we created.
const node = (this.props.forwardedRef || this.ref.current!) as HTMLElement;
attachProps(node, this.props, prevProps);
}
@ -64,7 +69,7 @@ export const createReactComponent = <PropType, ElementType>(
const newProps: IonicReactInternalProps<PropType> = {
...propsToPass,
ref: forwardedRef,
ref: forwardedRef || this.ref,
style
};