import React , { ReactNode } from 'react' ; import { ReactWrapperProps , ReactWrapperState } from './react-wrapper.types' ; import { createVueInstance , updateVueInstance } from './vue-creator' ; export class ReactWrapper extends React . Component < ReactWrapperProps , ReactWrapperState > { param reactProps param prevState returns static getDerivedStateFromProps ( reactProps , prevState ) { updateVueInstance ( prevState . vueInstance , reactProps ) ; return { ... prevState } ; } public constructor ( props ) { super ( props ) ; this . mountVueInstance = this . mountVueInstance . bind ( this ) ; this . state = { vueInstance : createVueInstance ( this ) } ; } protected get className ( ) : string { const reactWrapperClass = 'react-wrapper' ; return this . props . className ? `${ reactWrapperClass } ${ this . props . className }` : reactWrapperClass ; } param htmlElement protected mountVueInstance ( htmlElement ) { if ( htmlElement && this . state . vueInstance ) { const vueTarget = document . createElement ( 'div' ) ; htmlElement . appendChild ( vueTarget ) ; this . state . vueInstance . $mount ( vueTarget ) ; } } /**
     * This method will be executed when the React Wrapper will be unmounted. It unmounts the
     * vueInstance of the wrapper.
     */ componentWillUnmount ( ) { if ( this . state . vueInstance ) { const vueHTMLElement = this . state . vueInstance . $el as HTMLElement ; const reactContainer = vueHTMLElement . parentElement ; if ( reactContainer ) { reactContainer . removeChild ( vueHTMLElement ) ; } this . state . vueInstance . $destroy ( ) ; this . setState ( { vueInstance : null } ) ; } } returns render ( ) { return < div className = { this . className } ref = { this . mountVueInstance } / > ; } }