비 반응 애플리케이션에서 React 구성 요소를 마운트/마운트 해제 할 때 DOM 노드 참조 유지

Question

webpack을 사용하여 반응이없는 애플리케이션에서 반응 구성 요소를 사용하고 있습니다. 아이디어는 모든 DOM에서 마운트 및 마운트 해제 할 수 있도록 이들을 내보내는 것입니다. 나는 번들로 수출하고있어 웹팩 설정에서

import React from 'react' 
import MyComponent from '/path/to/MyComponent' 
import ComponentMounter from '/path/to/ComponentMounter' 

let componentMounter = new ComponentMounter(<MyComponent />) 

export let mount = componentMounter.mount 
export let unmount = componentMounter.unmount 

:

<script type="text/javascript" src="<?php echo base_url('assets/javascripts/build/component.js') ?>"></script> 
<button onclick="showComponent()" />show component</button> 
<button onclick="hideComponent()" />hide component</button> 
<div id='mainContainer'></div> 

<script > 
    function showComponent() { 
    MyComponent.mount(document.getElementById('mainContainer')) 
    } 

    function hideComponent() { 
    MyComponent.unmount() 
    } 
</script> 

이것은 웹팩 진입 점입니다 :

이

내가 구성 요소를 테스트하고있어 HTML 페이지입니다 사용하여 라이브러리 :

output: { 
    path: './assets/javascripts/build/', 
    filename: 'component.js', 
    libraryTarget: 'var', 
    library: 'MyComponent' 
} 

ComponentMounter 클래스 :

import ReactDOM from 'react-dom' 

class ComponentMounter { 

    constructor(component) { 
    this.component = component 
    } 

    mount = (element) => { 
    // This renders the react 'component', mounting it in the DOM 'element' 
    this.element = ReactDOM.render(this.component, element) 
    } 

    unmount =() => { 
    // This unmounts the react 'component', removing the DOM 'element' 
    ReactDOM.unmountComponentAtNode(this.element) 
    } 

} 

export default ComponentMounter 

잘하면 내가 뭘하려고하는지 알 수 있습니다. 쇼 버튼을 클릭하면 구성 요소가 문제없이 마운트됩니다.

하지만 마운트를 해제하려고 할 때, 내가이 경고를 얻을 같은 요소가 유효한 DOM 요소 아닌 것 같다

invariant.js:38 Uncaught Invariant Violation: unmountComponentAtNode(...): Target container is not a DOM element.

어떻게에 장착 된 반작용 구성 요소에 대한 참조를 유지할 수 있습니다 필요한 경우 쉽게 마운트 해제 할 수 있도록 ComponentMounter 객체 내의 DOM 노드?

Answer 1

this.element을 ReactDOM.render의 결과로 설정하면 올바르지 않습니다. 간단하게 문제를 해결하기 위해 다음과 ComponentMounter 클래스에 mount 기능을 변경 :

mount = (element) => { 
    this.element = element; 
    ReactDOM.render(this.component, this.element); 
} 

당신이 반환 ReactDOM.render의 반환 값에 this.element을 설정했다 wheras 이전에 부모 DOM 노드에 unmountComponentAtNode를 호출 할 수 있기 때문입니다 마운트 한 구성 요소 (또는 null)에 대한 참조이며 구성 요소가 마운트 된 dom 노드가 아닙니다.