Управление состоянием компонента при изменении размещения компонента

Question

Моя проблема заключается в следующем: у меня есть InnerComp, который можно разместить в двух разных позициях внутри структуры JSX, и его положение зависит от переменной place.

Что мне нужно, так это когда родительский компонент меняет положение InnerComp, текущее состояние (и я имею в виду не только внутреннее состояние компонента, но и другие обработанные дочерние элементы, все, что с ним связано) остается прежним.

Единственной идеей, которую я имел, было сохранение InnerComp в useRef, но, похоже, это не сработало. Позвольте мне показать вам пример в этой песочнице: https://codesandbox.io/s/pedantic-smoke-3risy
Теперь выполните следующие действия:

1. Если вы нажмете увеличить , вы увидите что counter в родительском компоненте обновлен, но props.counter внутри InnerComp не получает изменения (ref не вычисляется при повторном рендеринге :();
2. Если вы нажмете увеличение внутреннего , innerCounter действительно увеличивается;
3. Затем, если вы нажмете переключить место , InnerComp будет отображаться в другой позиции, но innerCounter вернулся к 0;

Я знаю, что мог бы попытаться изменить структуру HTML TAG и изменить CSS, когда я хочу изменить положение (и я конечно, это сработает), но, к сожалению, в реальном приложении REACT мне нужно было бы чрезмерно усложнить структуру, чтобы сделать это возможным (две позиции не связаны, как в этом примере).

Я полностью вне идей, поэтому здесь я спрашиваю, как этого добиться. Было бы достаточно указать мне на возможный путь, ru Я попробую.

Answer 1

Если я правильно понял вашу проблему, вам не нужен реф, просто используйте тот же key, например, вот так

 {place === true && <InnerComp counter={counter} key={1} />}
  <hr />
 <h2>Place 2</h2>
 {place === false && <InnerComp counter={counter} key={1}/>}

Поменяйте счетчики, вы увидите, что внутреннее состояние не потерял. Это связано с примирением. Я полагаю, что ответ здесь :

Ключ говорит React, что он должен считать элемент концептуально одинаковым, даже если он имеет разные позиции внутри своего родителя элемент между рендерами.

Answer 2

Я думаю, что это лучший случай для React.Portals . Но я еще этим не пользовался ☹️.

Answer 3

Я добавляю ответ на тот случай, если кто-нибудь еще найдет этот вопрос.

В конце концов, я нахожу решение, используя пакет react-reverse-portal NPM (https://www.npmjs.com/package/react-reverse-portal).

В принципе, насколько я понял, он эксплуатирует React.Portal. Что вы делаете, это определяете один раз элемент, который может изменить свою позицию в DOM внутри <portals.InPortal>, а затем вы используете <portals.outportal> для рендеринга этого элемента в разных местах (хотя вы НЕ МОЖЕТЕ рендерить один и тот же элемент в другую позицию в в то же время).