在非 React 应用程序中安装/卸载 React 组件时保留 DOM 节点的引用

Question

我正在使用 webpack 在非 React 应用程序中使用 React 组件。我们的想法是以某种方式导出它们，以便可以在任何 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 入口点：

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

在 webpack 配置中，我将包导出为库，使用：

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

ComponentMounter class:

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 节点中的 React 组件的引用，以便在需要时轻松卸载它？

Answer 1

您将 this.element 设置为 ReactDOM.render 的结果，这是不正确的。只需将 ComponentMounter class 中的 mount 函数更改为以下内容即可解决您的问题：

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

这是因为您想在父 DOM 节点上调用 unmountComponentAtNode 而之前您将 this.element 设置为 ReactDOM.render 的 return 值return 是对您安装的组件的引用（或 null），而不是安装组件的 dom 节点。

在非 React 应用程序中安装/卸载 React 组件时保留 DOM 节点的引用

Keep a reference of a DOM node when mounting / unmounting a React component in a non-React application

reactjs

react-dom