有条件地包装 React 组件而不丢失子组件状态

Question

我想知道是否可以有条件地包装 React 组件而不丢失子组件的状态。

在沙箱中，您可以看到，当单击几次“增量”按钮，然后执行“包裹子项”或“展开子项”操作时，计数器会重置。

https://codesandbox.io/s/fervent-herschel-f62e2?file=/src/App.js

相关代码可以看这里：

const ConditionalWrap = ({ condition, children }) => {
  return (
    <Fragment>
      {condition ? (
        <div>{children}</div>
      ) : (
        children
      )}
    </Fragment>
  );
};

1. 谁能向我指出为什么会发生这种情况的资源？我想父树需要保持不变，我只是想知道为什么。

2. children当有条件地将它们包装在元素或上下文提供程序中时，是否有某种方法可以保持所有状态？

Answer 1

React 文档中有对协调的解释。

React 看到两个不同类型的元素，因此拆除旧的并放入新的。

没有办法保持所有孩子的状态。将它们包裹在同一个元素中可能是个好主意。或者将状态移至您传递的上下文、redux 或 props 中。

有人为了重新父子关系而构建了一个库： https: //github.com/httptoolkit/react-reverse-portal