Как изменить реквизиты одного дочернего компонента из отдельного дочернего компонента?

Question

Я работаю над графическим приложением, используя Reactjs & Flux. В приложении пользователю необходимо будет выбрать определенный сдвиг, а затем назначить сотрудника для его покрытия. Назначение сотрудника произойдет, щелкнув имя сотрудника в отдельном списке.

структура компонентов выглядит следующим образом:

• Расписание App Компонент
  • Список сотрудников Компонент
    • Сотрудник Список компонентов Пункт
  • Календарь Компонент
    • месяц Компонент
      • день Компонент
        • Сдвиг компонентов

После выбора сдвига, нажав на нее, (есть 2 - 5 смен в любой день) Я хотел бы иметь возможность щелкнуть элемент списка сотрудников и присвоить значение имени employee_ame (this.props.employeeName) к выбранному сдвигу shiftAssignee prop (this.props.shiftAssignee).

Данные как для календаря, так и для сотрудников генерируются при запуске приложения и хранятся в виде отдельных объектов в локальном хранилище как «календарь» и «сотрудники» соответственно. В конечном счете, я хотел бы, чтобы эти данные обновлялись как часть потока данных потока, чтобы я мог сохранить его, а не регенерировать его каждый раз, когда приложение запускается, вытирая все предыдущие данные, но это не моя самая непосредственная проблема.

Базовая структура этих данных выглядит так следующим образом:

Календарь:

{ 
    "MonthName": "May", 
    "Days": [ 
     { 
      "DayDate": 1, 
      "DayName": "Friday", 
      "Shifts": [ 
       { 
        "shiftName": "Day Shift", 
        "required": true, 
        "shiftAssignee": "", 
        "shiftLength": 12 
       } 
       //remaining shifts 
      ], 
     } 
     //remaining days 
    ] 
} 

Сотрудники:

[ 
    { 
     "name": "F. Last", 
     "totalHours": 32, 
     "availableHours": 32, 
     "assignments": [], 
     "commitment": 0.8 
    } 
    //remaining employees 
] 

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

Answer 1

Я не считаю, что вам нужно иметь дело с отношениями между двумя дочерними компонентами.

В приложении потока данные поступают к самому верхнему компоненту и передаются детям. Глядя на это с этого пути, я считаю, что ваш вопрос можно перефразировать следующим образом: «Как получить дочерний компонент для изменения данных из хранилища потоков?"

Я написал на очень грубый пример в codepen: http://codepen.io/jhubert/pen/ZGJEdp

Это очень легкая концептуальная версия флюса магазина/диспетчера, встроенном в один я не рекомендую скопировать пример;. Это понятие мы после.

по сути, вы хотите, чтобы ваш список Сотрудник Пункт Компонент для изменения данных, а затем пусть работы потока данных естественно каскадной оттуда.

# not real code. kind of like coffeescript but really not real. 
_data = { { { shiftAssignee: '' } } } 
ScheduleAppComponent.setState = _data 
EmployeeListItem.onClick = setShiftAssigneeOnData() 
ScheduleAppComponent.setState = _data 

Этот материал в основном покрыт на высоком уровне в обзоре потока под Structure and Data Flow.

Надеюсь, это полезно! Удачи!

Answer 2

Ваша проблема, кажется, ваше использование (или отсутствие) состояния. Я думаю, вам, возможно, придется извлечь некоторые детали, чтобы указать, так что, когда он обновляется в любом месте, он каскадируется в другие части представления. Что-то вроде «shiftAssignee» в вашем календарном объекте кажется хорошим параметром для наблюдения за состоянием.

Answer 3

Я вижу, что вы отметили это с помощью reactjs-flux, но, похоже, вы давно не думали о том, чтобы реализовать магазины и действия Flux. Flux - это шаблон, который может помочь этому потоку данных, но если вы заинтересованы в Flux, вам нужно пройти весь путь и реализовать магазины, действия и прослушиватели событий.

С реализацией этого приложения Flux оба компонента должны прослушивать событие магазина о изменении данных о сотрудниках, которое может срабатывать, когда работник назначается сдвигу. Затем они могут извлекать новые данные и обновлять их отображение (чтобы показать, что сдвиг заполнен, и показать, что сотрудник занят во время этого блока/обновить их запланированные часы). Другое событие должно быть вызвано выбором пустого сдвига (действие создается и отправляется, при необходимости в хранилище календаря отмечается активный сдвиг, событие выдается, чтобы уведомить компоненты, что определенный сдвиг готов к заполнению) , компоненты могут обновить себя (возможно, попросить магазин, который теперь активен).

В приложении Flux вполне естественно иметь такую ​​взаимозависимость и интерактивность между различными компонентами React, поскольку это почти так, что Flux был изобретен для решения. Также может работать подход, не относящийся к потоку, но вы, вероятно, захотите обернуть оба компонента в взаимном родителе, который обрабатывает их взаимодействия, передавая функции компонентам, выполняющим эту работу.