Unmounting React.js node
JavascriptReactjsJavascript Problem Overview
I'm trying to unmount a React.js node with this._rootNodeID
>
> handleClick: function() {
>
> React.unmountComponentAtNode(this._rootNodeID)
>
> }
But it returns false
.
The handleClick
is fired when I click on an element, and should unmount the root-node. Documentation on unmountComponentAtNode
here
I've tried this as well:
> React.unmountComponentAtNode($('*[data-reactid="'+this._rootNodeID+'"]')[0])
That selector works with jQuery.hide()
, but not with unmounting it, while the documentation states it should be a DOMElement
, like you would use for React.renderComponent
After a few more tests it turns out it works on some elements/selectors.
It somehow works with the selector: document.getElementById('maindiv')
, where maindiv
is an element not generated with React.js, and just plain html. Then it returns true
.
But as soon as I try and select a different ElementById that is generated with React.js it returns false. And it wont work with document.body
either, though they all essentially return the same thing if I console.log them (getElementsByClassName('bla')[0]
also doesn't work)
There should be a simple way to select the node via this
, without having to resort to jQuery or other selectors, I know it's in there somewhere..
Javascript Solutions
Solution 1 - Javascript
Unmount components from the same DOM element that you mount them in. So if you did something like:
ReactDOM.render(<SampleComponent />, document.getElementById('container'));
Then you would unmount it with:
ReactDOM.unmountComponentAtNode(document.getElementById('container'));
Here is a simple JSFiddle where we mount the component and then unmount it after 3 seconds.
Solution 2 - Javascript
This worked for me. You may want to take extra precautions if findDOMNode
returns null.
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
Solution 3 - Javascript
The example I use:
unmount: function() {
var node = this.getDOMNode();
React.unmountComponentAtNode(node);
$(node).remove();
},
handleClick: function() {
this.unmount();
}
Solution 4 - Javascript
You don't need to unmount the component the simple solution it's change the state and render a empty 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>
}
});
Solution 5 - Javascript
As mentioned in the GitHub issue you filed, if you want access to a component's DOM node, you can use this.getDOMNode()
. However a component can not unmount itself. See Michael's answer for the correct way to do it.
Solution 6 - Javascript
First , i am new to reactjs ,too . Of course we can control the Component all by switch the state , but as I try and test , i get that , the React.unmountComponentAtNode(parentNode)
can only unmount the component which is rendered by React.render(<SubComponent>,parentNode)
. So <SubComponent>
to be removed must be appened by React.render()
method , so I write the code
<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>
Run the sample code in jsFiddle , and have a try .
>Note: in the sample code React.findDOMNode
is replaced by getDOMNode
as the reactjs version problem .