卸载 React.js 节点

IT技术 javascript reactjs
2021-03-23 16:56:31

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

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

但它返回false。

在handleClick当我点击一个元素上，而应卸载根节点被激发。文档在unmountComponentAtNode 这里

我也试过这个：

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任何一个一起工作，尽管如果我 console.log 它们基本上都返回相同的东西（getElementsByClassName('bla')[0]也不起作用）

应该有一种简单的方法可以通过 选择节点this，而不必求助于 jQuery 或其他选择器，我知道它在某个地方。

6个回答

从装载它们的同一个 DOM 元素卸载组件。因此，如果您执行以下操作：

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

然后你会卸载它：

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

这是一个简单的 JSFiddle，我们挂载组件，然后在 3 秒后卸载它。

@Marconi 顶级 React 组件只能有一个根节点，因此您可能希望使用基于该组件的 props 或状态的逻辑来确定是否应包含子组件。
2021-05-22 16:56:31
@TrySpace 如果您想从组件本身触发卸载，您可以将 DOM 元素作为道具传递并在需要时引用它：http : //jsfiddle.net/iamlacroix/JRy7W/2
2021-05-23 16:56:31
@MichaelLaCroix 嘿，谢谢，但我昨晚通过为每个子组件添加单独的容器来管理，然后删除变得更容易，因为它有自己的容器。
2021-05-23 16:56:31
@TrySpace 在你上面的 JSFiddle 中，它不起作用，因为你试图在渲染的组件上调用 unmount 而#element不是你用来挂载它的容器#container。React 不会替换容器本​​身，只会替换它的innerHTML. 通过这种方式，您始终可以再次引用该容器（例如，使用新道具重新安装、替换为不同的组件等）
2021-05-25 16:56:31
@MichaelLaCroix 如果您在容器中有组件列表并且只想删除一个组件怎么办？由于只有一个容器，调用React.unmountComponentAtNode该容器将删除所有组件。你如何解决它？
2021-06-03 16:56:31

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

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
这段代码非常适合我。添加parentNode帮助我删除整个 React 组件。
2021-05-30 16:56:31
如果 Component.render 返回 null（在这种情况下 Component.getDOMNode() 也返回 null），此代码会引发异常。
2021-06-17 16:56:31

我使用的例子：

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

handleClick: function() {
  this.unmount();
}
$(node) 是否使用 jQuery？
2021-05-26 16:56:31

您不需要卸载组件简单的解决方案，它改变状态并呈现一个空的 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>
  }
});
渲染一个空的 div 拯救了我的一天。谢谢你的提示。
2021-06-02 16:56:31

正如您提交的 GitHub 问题中所述，如果您想访问组件的 DOM 节点，您可以使用this.getDOMNode(). 但是，组件不能自行卸载。请参阅迈克尔的答案以了解正确的方法。

a component can not unmount itself 可能就是这样
2021-05-28 16:56:31
在 react 0.14.x 中， this.getDOMNode 已被弃用。请使用 ReactDOM.findDOMNode(this.refs.[nodeName]) 自定义组件或 this.refs[nodeName] 支持 JSX 标签。
2021-06-10 16:56:31
其它你可能感兴趣的问题
上一篇带有旧版本 React Native 的新 React Native 项目 下一篇用 ES6 类react静态