卸载React.js节点

Question

我正在尝试用React.js卸载一个this._rootNodeID节点

函数(){ React.unmountComponentAtNode(this._rootNodeID) }

但是它返回false。

当我单击一个元素时会触发handleClick，并且应该卸载根节点。关于unmountComponentAtNode 这里的文档

我也试过这个：

React.unmountComponentAtNode($('*data-reactid="'+this._rootNodeID+'"'))

该选择器适用于jQuery.hide()，但不能卸载它，而文档声明它应该是DOMElement，就像用于React.renderComponent的那样。

经过几次测试，结果证明它可以在一些元素/选择器上工作。

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

但是，一旦我尝试选择一个与ElementById一起生成的不同的React.js，它就会返回false。而且它也不适用于document.body，尽管如果我console.log它们的话，它们都会返回相同的东西(getElementsByClassName('bla')[0]也不起作用)

应该有一种通过this选择节点的简单方法，而不必求助于jQuery或其他选择器，我知道它就在那里。

Answer 1

从挂载组件所在的DOM元素中卸载组件。如果你做了这样的事情：

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

然后您将用以下方式卸载它：

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

这里是一个简单的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();
}