Условно оборачивая компонент 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 видит два элемента разных типов и, таким образом, разрушает старый и добавляет новый.

Нет способа сохранить состояние всех детей. Это может быть хорошей идеей, чтобы держать их в одном элементе. Или переместите состояние в контекстный, редукционный или реквизит, который вы передаете.

Существует библиотека, созданная с целью переопределения: https://github.com/httptoolkit/react-reverse-portal