卸载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.findDOMNode被React.findDOMNodereplace为reactjs版本问题。
