Question

我正在尝试使用this._rootNodeID

卸载React.js节点

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

但它会返回false。

单击某个元素时会触发handleClick，并应卸载根节点。有关unmountComponentAtNode here

的文档

我也试过这个：

React.unmountComponentAtNode（$（ '* [数据reactid = “ '+ this._rootNodeID +”']'）[0]）

该选择器适用于jQuery.hide()，但不能与卸载它一起使用，而文档说明它应该是DOMElement，就像您用于React.renderComponent

一样

经过几次测试后发现它适用于一些元素/选择器。

它以某种方式适用于选择器：document.getElementById('maindiv')，其中maindiv是一个不是用React.js生成的元素，而只是普通的html。然后它返回true。

但是一旦我尝试选择使用React.js生成的不同ElementById，它就会返回false。它也不能与document.body一起工作，尽管如果我控制它们，它们基本上都返回相同的东西.log（getElementsByClassName('bla')[0]也不起作用）

应该有一种简单的方法可以通过this选择节点，而不必诉诸jQuery或其他选择器，我知道它就在那里......

Answer 1

从安装它们的同一DOM元素中卸载组件。所以如果你做了类似的事情：

ReactDOM.render(<SampleComponent />, document.getElementById('container'));

然后你将用以下方法卸载它：

ReactDOM.unmountComponentAtNode(document.getElementById('container'));

以下是a simple JSFiddle我们安装组件，然后在3秒后卸载它。

Answer 2

这对我有用。如果findDOMNode返回null，您可能需要采取额外的预防措施。

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);

Answer 3

我使用的例子：

unmount: function() {
  var node = this.getDOMNode();
  React.unmountComponentAtNode(node);
  $(node).remove();
},

handleClick: function() {
  this.unmount();
}

Answer 4

您不需要卸载组件的简单解决方案是更改状态并呈现空div

const AlertMessages = React.createClass({
  getInitialState() {
    return {
      alertVisible: true
    };
  },
  handleAlertDismiss() {
    this.setState({alertVisible: false});
  },
  render() {
    if (this.state.alertVisible) {
      return (
        <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
          <h4>Oh snap! You got an error!</h4>
        </Alert>
      );
    }
    return <div></div>
  }
});

Answer 5

如the GitHub issue you filed中所述，如果要访问组件的DOM节点，可以使用this.getDOMNode()。但是组件无法卸载自身。请参阅迈克尔的答案，了解正确的方法。

Answer 6

首先，我也是反应新手。当然我们可以通过切换状态来控制所有组件，但是当我尝试测试时，我得到了，React.unmountComponentAtNode(parentNode)只能卸载由{{1}呈现的组件}。因此，必须使用React.render(<SubComponent>,parentNode)方法添加要删除的<SubComponent>，因此我会编写代码

React.render()

在jsFiddle中运行示例代码，然后试一试。

注意：示例代码<script type="text/jsx"> var SubComponent = React.createClass({ render:function(){ return ( <div><h1>SubComponent to be unmouned</h1></div> ); }, componentWillMount:function(){ console.log("componentWillMount"); }, componentDidMount:function(){ console.log("componentDidMount"); }, componentWillUnmount:function(){ console.log("componentWillUnmount"); } }); var App = React.createClass({ unmountSubComponent:function(){ var node = React.findDOMNode(this.subCom); var container = node.parentNode; React.unmountComponentAtNode(container); container.parentNode.removeChild(container) }, componentDidMount:function(){ var el = React.findDOMNode(this) var container = el.querySelector('.container'); this.subCom = React.render(<SubComponent/> , container); }, render:function(){ return ( <div className="app"> <div className="container"></div> <button onClick={this.unmountSubComponent}>Unmount</button> </div> ) } }); React.render(<App/> , document.body); </script>被React.findDOMNode替换为reactjs版本问题。

卸载React.js节点

6 个答案: