卸载 React Parent 而不卸载 Child

Question

是否可以卸载 React 组件的父组件而不卸载子组件？有哪些解决方法可以实现此结果？当然必须有一些（可能是 hacky）方法来做到这一点。

例子

当这个：

<Parent>
  <Child/>
</Parent>

对此的更改：

<Child/>

我希望在不调用 Child 的生命周期方法 componentWillUnmount 的情况下调用 Parent 的生命周期方法 componentWillUnmount。

我知道这可能是不可能的，但想知道是否有人对这个问题有创造性的解决方案。

更新

这是我的具体用例（希望我能很好地解释这一点）：

我有一个高阶组件，它没有引入任何新的 dom 元素，但本质上只是为子组件引入了一些新的上下文。根据此上下文是否存在，子组件呈现略有不同。不幸的是，当我删除并添加父项时，会创建一个新的子实例并且它 unmounts/remounts。这种卸载和重新安装的唯一问题是子元素会执行一些 dom 测量来决定是否为其某些元素显示水平滚动条和溢出菜单。当它 unmounts/remounts 时，此菜单会出现难看的闪烁。

Answer 1

您可以处理渲染逻辑。例如在你的渲染函数中：

  if (showParent) {
    return (
    <Parent>
        <Child/>
    </Parent>);
  } else{
    return <Child/>;
  }

然后每当布尔值 showParent 改变组件呈现不同。

super-parent object，调用此 render() ，应该存储状态以便更新它们并保留 child（和 parent，以防万一你想重新打开它）。

因此它还应该包含 child 的状态，以便保留它。换句话说：将模型分层移动到超级 parent.

卸载 React Parent 而不卸载 Child

Unmount React Parent without Unmounting Child

javascript

reactjs

higher-order-components