取消挂载React.js节点

Question

我试图卸载React.js节点与this._rootNodeID

handleClick: function() { 

     React.unmountComponentAtNode(this._rootNodeID) 

} 

但它返回false。

​​是我点击某个元素时触发的，应该卸载根节点。上unmountComponentAtNodehere

文档我试图这个问题，以及：

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工作，要么，但他们本质上都返回同样的事情，如果我CONSOLE.LOG他们（getElementsByClassName('bla')[0]也不起作用）

应该有一个简单的方法通过this选择节点，而不必诉诸jQuery的或其他的选择，我知道它在那里的地方..

Answer 1

卸载来自同一个DOM元素，你将它们安装在组件所以，如果你不喜欢的东西：

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

，那么你会卸载它与：

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

这是a simple JSFiddle我们安装组件并在3秒后卸载组件。

Answer 2

如the GitHub issue you filed所述，如果您想访问组件的DOM节点，可以使用this.getDOMNode()。但是一个组件不能自行卸载。看到迈克尔的答案是正确的做法。

Answer 3

我使用的例子：

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

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

Answer 4

这为我工作。如果findDOMNode返回null，您可能需要采取额外的预防措施。

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

Answer 5

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

<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被getDOMNode替换为reactjs版本问题。

Answer 6

你不需要卸载组件简单的解决方法是改变状态，并呈现一个空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> 
    } 
});