Javascript Don'；如果父级卸载，则不能卸载子级

我有一个组件，我想在一个新的浏览器窗口中渲染，我大致使用了以下技术：

这是它的简短摘录：

MyWindowPortal类扩展了React.PureComponent{ 建造师（道具）{ 超级（道具）； //步骤1：创建一个容器 this.containerell=document.createElement（'div'）； this.externalWindow=null； } render（）{ //步骤2：将props.children附加到尚未装入任何位置的容器中 返回ReactDOM.createPortal（this.props.children，this.containerell）； } componentDidMount（）{ //步骤3：打开一个新的浏览器窗口并存储对它的引用 this.externalWindow=window.open（''，''，宽度=600，高度=400，左侧=200，顶部=200'）； //步骤4：将容器（附加了props.children）附加到新窗口的主体 this.externalWindow.document.body.appendChild（this.containerell）； } 组件将卸载（）{ //步骤5：当父组件中的This.state.showWindowPortal变为false时，将触发此操作 //所以我们关上窗户收拾一下 this.externalWindow.close（）； }

---

}关闭选项卡时，您不需要调用

closeWindowPortal（）

。 在Codepen示例中，您可以将其从

中删除：

---

您能从Codepen示例中更改

吗？如果您是这样要求的，我可以完全控制所有组件。不过，一个尽可能接近直接涉及的两个组件的解决方案会很好，而不必一直到根。这是代码笔的明显解决方案，没错。当我发布代码来说明我想要的东西时，我并没有想到这一点。问题是，我自己没有这样的方法。看来我得主动把东西冻住。顺便说一句，如果有帮助的话，我正在使用react路由器。

window.addEventListener('beforeunload', () => {
  this.closeWindowPortal();
});