Question

我正在使用Reactjs＆amp; amp;通量。在应用程序中，用户需要能够选择特定班次，然后指派员工来覆盖它。通过在单独的列表中单击员工的姓名来进行员工分配。

组件结构如下：

安排应用组件
- 员工列表组件
  - 员工清单项目组件
- 日历组件
  - 月份组件
    - 日组件
      - 移动组件

通过点击选择班次后，（任何一天都有2到5班）我希望能够点击员工列表项并拥有其employeeName道具的值（this.props。 employeeName）分配给所选Shift的shiftAssignee prop（this.props.shiftAssignee）。

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

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

日历：

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

我不相信你需要关注两个子组件之间的关系。

在助焊器应用程序中，数据流入最顶层组件并传递给子组件。从这个角度来看，我相信你的问题可以改为：＆＃34;我如何让一个子组件来改变通量存储中的数据？＆＃34;

我在codepen中写了一个非常粗略的例子：http://codepen.io/jhubert/pen/ZGJEdp

它是一个非常轻量级的通用存储/调度程序的概念版本。 我不建议复制示例;这是我们追求的概念。

基本上，您希望Employee List Item Component修改数据，然后让自然级联数据流从那里开始工作。

# 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

I see you tagged this with reactjs-flux, but it doesn't seem you've thought about implementing Flux stores and actions much so far. Flux is a pattern that could help this data flow happen, but if you're interested in Flux, you kind of need to go all the way and implement stores, actions, and event listeners.

With a Flux implementation of this app, both components should listen to a store event about employee data changing, which could fire whenever an employee is assigned to a shift. Then they can fetch the new data and update their display (to show the shift filled and to show the employee busy during that block/update their scheduled hours total). A different event should be triggered by the selection of an empty shift (an action is created and dispatched, active shift is noted if necessary in the calendar store, an event is emitted to notify the components that a certain shift is ready to be filled), the components can update themselves (maybe asking the store which shift is now active).

It's perfectly natural in a Flux app to have this kind of interdependence and interactivity between different React components, as it's pretty much the case that Flux was invented to solve. A non-Flux approach could also work, but you likely would want to wrap both components in a mutual parent that handles the interactions for them, passing down functions to the components that do the work.

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

3 个答案: