卸载React.js节点

Question

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

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

但它回来了false.

在handleClick当我点击一个元素上,而应卸载根节点被激发.这里有文档unmountComponentAtNode

我也试过这个:

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'));

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