Как в React рендерить компонент выше в дереве и в двух местах?
Где-то глубоко в дереве компонентов React есть компонент Component, которому нужно выше в дереве (не в родительском компоненте) в компоненте Root отрендерить какой-то блок Child.
- После размонтирования компонента
Component, этот "дочерний" компонентChild(который должен находится выше в дереве вRoot) должен размонтироваться соответственно. - При этом компонент
Childможет быть отрендерен в одном из компонентовSidebar1илиSidebar2, в зависимости от каких-то условий, например, ширина экрана. - Таких блоков может быть очень много, поэтому нужно что бы
Componentтолько рисовал компонент, аRootуже определял логику где его рендерить: вSidebar1или вSidebar2.
Короче, нужно что бы компонент рендерил компонент не внутри себя, в вне себя высоко в дереве. Как с помощью React сделать это лучше всего?
Ответы (2 шт):
Автор решения: xydope
→ Ссылка
Так это не работает.
- Нужно поднять состояние до самого высокого компонента, допустим,
App.Appбудет пробрасывать доComponentтригер состояния показа.Componentпереключает состояние показа. Определение что и где рендерит зависит от вашей реализации - это может определять как самComponent, так и хранитель состояния -App - Либо запихнуть все элементы, где может быть отрендерен
Child, в общий контекст, в котором манипулировать состоянием, а также идентификатором того, гдеChildдолжен рендериться{childId == this.id ? <Child /> : null}
И в том и в ином случае сам Component не рендерит Child, он лишь отвечает за переключение показа.
Автор решения: Yakov Botov
→ Ссылка
Я думаю, вам может помочь использование порталов react Ссылка на документацию: https://ru.reactjs.org/docs/portals.html