ReactJS — передача реквизита (состояния) детям детей

Единственный способ сделать это в React — передать состояние и реквизиты от родителя непосредственно дочернему. Если внуку нужно состояние или реквизит от бабушки и дедушки, родители должны продолжать передавать его вниз, пока он не дойдет до внука. Реагировать однонаправленно; только от родителя к ребенку.

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

<Sidebar someState={this.state.someParentState} />
<ContentArea someState={this.state.someParentState} />

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

Теперь, если вы думаете: «Вау, не будет ли это беспорядок, если есть несколько детей, с детьми, у которых есть дети?». Ответ: «Да, может!» Вот тут-то и появляется контейнер состояния (Redux, Flux, MobX). Вот почему вы должны его использовать:

1. Вставьте состояние непосредственно в любые дочерние элементы. Например, он не обязательно должен идти от родителя к ребенку, он может идти от прародителя непосредственно к внуку. В Redux вы бы сделали это, просто используя функции connect и mapStateToProps для подключения частей состояния к одному компоненту в качестве реквизита.
2. Состояние легче поддерживать и обрабатывать в больших приложениях. Попробуйте создать Facebook только с React, передавая состояние вниз, вниз, вниз.
3. Отделяет состояние от компонента. Поскольку React предназначен для «создания интерфейсов пользовательского интерфейса», разумно отделить состояние от представления. Для простых случаев это нормально, но когда приложение становится более сложным, это не так.

Рассмотрим следующие ресурсы для Redux (самого популярного контейнера состояний):

• https://egghead.io/courses/getting-started-with-redux
• http://redux.js.org/docs/introduction/
• https://github.com/reactjs/redux/tree/master/examples

Если вы обрабатываете состояние более сложным способом, возможно, стоит подумать об использовании Redux для обработки состояния во всем приложении.

Таким образом, вы можете сопоставить состояние с реквизитами, используя «подключение», и передавать состояние между компонентами по мере необходимости. Подробнее о как это реализовать.