import React from 'react' ; export type State = { portals : { key : number ; children : React . ReactNode ; } [ ] ; } ; interface PortalManagerProps { renderManagerView : ( children : React . ReactNode ) => React . ReactElement ; } export interface PortalManagerState { portals : any [ ] ; } /**
 * Portal host is the component which actually renders all Portals.
 */ export class PortalManager extends React . PureComponent < PortalManagerProps , PortalManagerState > { state : State = { portals : [ ] } ; mount = ( key , children ) => { this . setState ( ( state ) => ( { portals : [ ... state . portals , { key , children } ] } ) ) ; } ; update = ( key , children ) => { this . setState ( ( state ) => ( { portals : state . portals . map ( ( item ) => { if ( item . key === key ) { return { ... item , children } ; } return item ; } ) } ) ) ; } ; unmount = ( key ) => { this . setState ( ( state ) => ( { portals : state . portals . filter ( ( item ) => item . key !== key ) } ) ) ; } ; render ( ) { const { renderManagerView } = this . props ; return this . state . portals . map ( ( { key , children } , i ) => ( < React . Fragment key = { key } > { renderManagerView ( children ) } < /React.Fragment> ) ) ; } }