Question

我正在使用react-bootstrap模态组件。我希望从页面中卸载，但遇到一个错误，即使在深入调试React源代码后我也无法查明。

我已经想出了一种从DOM中卸载组件的方法，没有任何错误，但我想知道为什么 ......

我遇到的错误：

警告：React无法找到数据重新连接值.3.1的根组件节点。如果您看到此消息，则可能意味着您已在页面上加载了两份React副本。目前，一次只能加载一个React副本。警告

未捕获的TypeError：无法读取属性＆＃39; firstChild＆＃39;未定义的

卸载时抛出错误的示例组件，请注意底部的closeModal方法

import React from 'react';
import ReactDOM from 'react-dom';

let ReactBootstrapModal = React.createClass({   
   render() {
    return (
      <Modal show={true} onHide={closeModal}>
          <Modal.Header closeButton>
            <Modal.Title>Sample</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            Some body...
          </Modal.Body>
        </Modal>
    );   } });

var $$modalContainer = document.querySelector('#app-modal');

ReactDOM.render(<ReactBootstrapModal/>, $$modalContainer);

let closeModal = function(){
  try {
    ReactDOM.unmountComponentAtNode($$modalContainer);
  }
  catch (e) {
    console.log(e);
  }

卸载时没有任何错误的示例组件 - 这里的区别是我将unmountComponentAtNode包裹在setTimeout中10毫秒并且不会抛出任何错误：

import React from 'react';
import ReactDOM from 'react-dom';

let ReactBootstrapModal = React.createClass({   
   render() {
    return (
      <Modal show={true} onHide={closeModal}>
          <Modal.Header closeButton>
            <Modal.Title>Sample</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            Some body...
          </Modal.Body>
        </Modal>
    );   } });

var $$modalContainer = document.querySelector('#app-modal');

ReactDOM.render(<ReactBootstrapModal/>, $$modalContainer);

let closeModal = function(){
  try {
    setTimeout(function(){ReactDOM.unmountComponentAtNode($$modalContainer)},10);
  }
  catch (e) {
    console.log(e);
  }

React-Bootstrap模式 - 从DOM

0 个答案: