卸载 React.js 节点

Question

我正在尝试使用 this._rootNodeID 卸载 React.js 节点

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

但它返回false。

handleClick 在我点击一个元素时被触发，并且应该卸载根节点。关于unmountComponentAtNodehere的文档

我也试过这个：

React.unmountComponentAtNode($('*[data-reactid="'+this._rootNodeID+'"]')[0])

该选择器适用于 jQuery.hide()，但不适用于卸载它，而文档指出它应该是 DOMElement，就像您将用于 React.renderComponent 一样

经过几次测试，结果证明它适用于一些元素/选择器。

它以某种方式与选择器一起工作：document.getElementById('maindiv')，其中maindiv 是一个不是用 React.js 生成的元素，只是普通的 html。然后它返回true。

但是，一旦我尝试选择使用 React.js 生成的不同 ElementById，它就会返回 false。它也不适用于document.body，尽管如果我对它们进行控制台记录，它们基本上都会返回相同的东西（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

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

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

Answer 3

我使用的例子：

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

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

Answer 4

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

Answer 5

正如the GitHub issue you filed中提到的，如果你想访问组件的DOM节点，你可以使用this.getDOMNode()。但是，组件不能自行卸载。请参阅 Michael 的回答，了解正确的做法。

Answer 6

首先，我也是 reactjs 新手。当然我们可以通过切换 state 来控制组件，但是当我尝试和测试时，我明白了，React.unmountComponentAtNode(parentNode) 只能卸载由React.render(<SubComponent>,parentNode) 呈现的组件。所以要删除的<SubComponent>必须通过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替换为getDOMNode作为reactjs版本问题。