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

Question

我想知道是否有可能在不丢失子组件状态的情况下有条件地包装 React 组件。

在沙盒中，您可以看到当点击增量按钮几次，然后是“包裹 child ”或“展开 child ” Action 时，计数器被重置。

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 documentation 中有对帐的解释.

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

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

有一个图书馆是有人为了重命名而建的:https://github.com/httptoolkit/react-reverse-portal