0

Где-то глубоко в дереве компонентов React есть компонент Component, которому нужно выше в дереве (не в родительском компоненте) в компоненте Root отрендерить какой-то блок Child.

  1. После размонтирования компонента Component, этот "дочерний" компонент Child (который должен находится выше в дереве в Root) должен размонтироваться соответственно.
  2. При этом компонент Child может быть отрендерен в одном из компонентов Sidebar1 или Sidebar2, в зависимости от каких-то условий, например, ширина экрана.
  3. Таких блоков может быть очень много, поэтому нужно что бы Component только рисовал компонент, а Root уже определял логику где его рендерить: в Sidebar1 или в Sidebar2.

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

2
  • Что значит высоко в дереве? В дереве реакта или дом?
    – xydope
    28 сен 2020 в 18:36
  • Это значит в идеале на самом высоком уровне, обычно в корневом компоненте App. В дереве компонентов React 28 сен 2020 в 23:40

2 ответа 2

0

Так это не работает.

  • Нужно поднять состояние до самого высокого компонента, допустим, App. App будет пробрасывать до Component тригер состояния показа. Component переключает состояние показа. Определение что и где рендерит зависит от вашей реализации - это может определять как сам Component, так и хранитель состояния - App
  • Либо запихнуть все элементы, где может быть отрендерен Child, в общий контекст, в котором манипулировать состоянием, а также идентификатором того, где Child должен рендериться {childId == this.id ? <Child /> : null}

И в том и в ином случае сам Component не рендерит Child, он лишь отвечает за переключение показа.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.