卸载React.js节点

我试图用this._rootNodeID卸载一个React.js节点

  handleClick: function() { React.unmountComponentAtNode(this._rootNodeID) } 

但是它返回false

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

我也试过这个:

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

该select器与jQuery.hide() ,但不能卸载它,而文档声明它应该是一个DOMElement ,就像你将用于React.renderComponent

经过几次更多的testing后发现它可以在某些元素/select器上工作。

它以某种方式与select器一起工作: document.getElementById('maindiv') ,其中maindiv是一个不与React.js生成的元素,只是纯html。 然后它返回true

但只要我尝试并select与React.js生成不同的ElementById它将返回false。 它也不会与document.body工作,尽pipe它们本质上都是返回相同的东西,如果我console.log它们( getElementsByClassName('bla')[0]也不起作用)

应该有一个简单的方法来select通过this节点,而不必诉诸于jQuery或其他select器,我知道它在那里..

从安装它们的同一DOM元素中卸载组件。因此,如果您执行了如下操作:

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

然后你将卸载它:

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

这里是一个简单的JSFiddle ,我们挂载组件,然后在3秒后卸载它。

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

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

我使用的示例:

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

你不需要卸载组件,简单的解决scheme就是改变状态并渲染一个空的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> } }); 

正如你提交的GitHub问题所提到的 ,如果你想访问一个组件的DOM节点,你可以使用this.getDOMNode() 。 但是一个组件不能卸载自己。 见迈克尔的答案是正确的方式来做到这一点。

首先,我也是新来的。 当然,我们可以通过切换状态来控制组件,但是当我尝试和testing时,我知道, React.unmountComponentAtNode(parentNode)只能卸载由React.render(<SubComponent>,parentNode)呈现的组件, 。 所以被删除的<SubComponent>必须被React.render()方法所React.render() ,所以我写了代码

 <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> 

在jsFiddle中运行示例代码,并尝试一下。

注意:在示例代码中, React.findDOMNodeReact.findDOMNodereplace为reactjs版本问题。