如何从一个单独的子组件修改一个子组件的道具？

Question

我正在使用 Reactjs 和 Flux 开发一个调度应用程序。在应用程序中，用户需要能够 select 特定班次，然后分配一名员工来完成它。单击单独列表中的员工姓名即可进行员工分配。

组件结构如下：

安排应用程序组件
- 员工列表组件
  - 员工列表项组件
- 日历组件
  - 月组件
    - 日组件
      - 移位分量

在 select 通过单击轮班后，（任何给定的一天有 2 - 5 个班次）我希望能够单击员工列表项并获得其值employeeName 道具 (this.props.employeeName) 分配给 selected Shift 的 shiftAssignee 道具 (this.props.shiftAssignee)。

日历和员工的数据都是在应用程序启动时生成的，并作为单独的对象存储在本地存储中，分别为 'calendar' 和 'employees'。最终，我希望将这些数据更新为通量数据流的一部分，这样我就可以保留它，而不是每次应用程序启动时都重新生成它，擦除所有以前的数据，但这不是我最关心的问题。

该数据的基本结构如下所示：

日历：

{
    "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

我认为您不需要关心两个子组件之间的关系。

在 flux 应用程序中，数据流入最顶层的组件并向下传递给子组件。从这个角度来看，我相信你的问题可以改写为："How do I get a child component to change the data from the flux store?"

我在代码笔中写了一个非常粗略的例子：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 实现，两个组件都应侦听有关员工数据更改的商店事件，该事件可能会在员工被分配到轮班时触发。然后他们可以获取新数据并更新他们的显示（以显示轮班已满并显示员工在 block/update 他们的计划总小时数期间忙碌）。一个不同的事件应该通过选择一个空班次来触发（创建和调度一个动作，如果需要在日历存储中记录活动班次，发出一个事件以通知组件某个班次已准备好填充），组件可以自行更新（可能会询问商店哪个班次现在处于活动状态）。

在 Flux 应用程序中，不同 React 组件之间具有这种相互依赖性和交互性是非常自然的，因为发明 Flux 几乎就是为了解决这种情况。非 Flux 方法也可以工作，但您可能希望将两个组件包装在一个共同的父级中，该父级处理它们的交互，将功能传递给完成工作的组件。

如何从一个单独的子组件修改一个子组件的道具？

How can I modify the props of one child component from a separate child component?

flux

reactjs

reactjs-flux