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

Question

У меня есть быстрый вопрос. Как передать состояние детям детей?

Если у родителя есть какое-то состояние, то каким образом ES6 лучше всего передать это состояние не его прямому ребенку, а потом ребенку прямого ребенка.

У меня есть изображение макета.

Главное приложение - это основной компонент, состоящий из заголовка, боковой панели, .

Боковая панель состоит из элементов боковой панели.

Область содержимого состоит из - элементов контента.

Главный вопрос

Как я могу нажав Sidebar Пункт обновления компонентов, которые находятся в содержимого?

Обратите внимание, что этот макет имеет 6 компонентов (приложение, заголовок, боковая панель, область содержимого, элемент боковой панели, элемент контента).

Изображение

Answer 1

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

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

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

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

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

1. Вставьте состояние прямо всем детям. Например, он не должен поступать от родителя к ребенку, он может перейти от дедушки и бабушки непосредственно к внуку.В Redux вы должны сделать это, просто используя функции connect и mapStateToProps для подключения частей состояния к одному компоненту в качестве реквизита.
2. Состояние легче обслуживать и обрабатывать в больших приложениях. Попробуйте создать Facebook с помощью Реакта, передав состояние вниз, вниз, вниз.
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

Answer 2

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

Таким образом, вы можете отобразить состояние в реквизитах с помощью «connect» и передать состояние между компонентами по мере необходимости. Посмотрите here для получения дополнительной информации о том, как его реализовать.