React以外のアプリケーションでReactコンポーネントをマウント/アンマウントするときにDOMノードの参照を保持する

Question

webpackを使用して、反応しないアプリケーションで反応コンポーネントを使用しています。アイデアは、DOMにマウントしたりマウント解除したりできるように、これらをエクスポートすることです。

これは私がコンポーネントをテストしていますhtmlページです：

<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> 

これはWebPACKのエントリポイントである：WebPACKのコンフィグで

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 

、私のようにバンドルを輸出しています

​​

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ノードではありません。