Question

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

Was it helpful?

Solution

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.

OTHER TIPS

This worked for me. You may want to take extra precautions if findDOMNode returns null.

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

The example I use:

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

handleClick: function() {
  this.unmount();
}

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

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.

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 .

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top