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

fix(react): callback refs now work correctly with ionic components (#23152)

Browse Source 
resolves #23153
This commit is contained in:
Tucker Whitehouse
2021-04-22 09:56:04 -04:00
committed by GitHub
parent 004885bfd4
commit 0dd189e2c0
14 changed files with 63 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/routing/OutletPageManager.tsx
View File

@ -8,7 +8,7 @@ import { StackContext } from './StackContext';
interface OutletPageManagerProps {
className?: string;
forwardedRef?: React.RefObject<HTMLIonRouterOutletElement>;
forwardedRef?: React.ForwardedRef<HTMLIonRouterOutletElement>;
routeInfo?: RouteInfo;
StackManager: any;
}

10
packages/react/src/routing/PageManager.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import { mergeRefs } from '../components/utils';
import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext';
import { RouteInfo } from '../models';
@ -7,7 +8,7 @@ import { StackContext } from './StackContext';
interface PageManagerProps {
className?: string;
forwardedRef?: React.RefObject<HTMLDivElement>;
forwardedRef?: React.ForwardedRef<HTMLDivElement>;
routeInfo?: RouteInfo;
}
@ -15,10 +16,13 @@ export class PageManager extends React.PureComponent<PageManagerProps> {
ionLifeCycleContext!: React.ContextType<typeof IonLifeCycleContext>;
context!: React.ContextType<typeof StackContext>;
ionPageElementRef: React.RefObject<HTMLDivElement>;
stableMergedRefs: React.RefCallback<HTMLDivElement>
constructor(props: PageManagerProps) {
super(props);
this.ionPageElementRef = this.props.forwardedRef || React.createRef();
this.ionPageElementRef = React.createRef();
// React refs must be stable (not created inline).
this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef)
}
componentDidMount() {
@ -95,7 +99,7 @@ export class PageManager extends React.PureComponent<PageManagerProps> {
className={
className ? `${className} ion-page` : `ion-page`
}
ref={this.ionPageElementRef}
ref={this.stableMergedRefs}
{...props}
>
{children}