反应自毁组件

Question

我有一个问题，我如何才能自行卸载组件。 所以基本上，当我单击组件时，它应该自行卸载 无需调用父组件，即可隐藏/显示属性。 这是我的代码示例。

onClose = () => {
    let mountNode = ReactDOM.findDOMNode(this);
    ReactDOM.unmountComponentAtNode(mountNode);
}

Answer 1

您可以存储对组件安装在节点实例上的节点的引用。由ReactDOM.render() 使用ref回调返回。

class Thing extends React.Component {
  onClose = () => {
    ReactDOM.unmountComponentAtNode(this.mountNode);
  }
}
const node = document.getElementById("root");
const inst = ReactDOM.render(<Thing ref={(inst) => inst.mountNode = node} />, node);

（已编辑为使用ref，请@hawk欢呼。）