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

【问题标题】：How can I modify the props of one child component from a separate child component?如何从单独的子组件修改一个子组件的道具？
【发布时间】：2015-08-29 15:04:12
【问题描述】：

我正在使用 Reactjs 和 Flux 开发一个调度应用程序。在应用程序中，用户需要能够选择一个特定的班次，然后分配一名员工来处理它。员工分配将通过单击单独列表中的员工姓名进行。

组件结构如下：

计划应用程序组件
- 员工列表组件
  - 员工列表项组件
- 日历组件
  - 月组件
    - 日组件
      - 移位组件

通过单击选择一个班次后，（任何一天都有 2 - 5 个班次）我希望能够单击一个员工列表项并获得其 employeeName 属性的值（this.props.props）。 employeeName) 分配给所选 Shift 的 shiftAssignee 道具 (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
]

我不知道这是否比需要的信息更多，或者我是否忽略了一些对考虑至关重要的内容。如果需要更多信息，请告诉我。

【问题讨论】：

您还没有显示任何代码？只有父组件可以/应该更改子组件。通常使用某种类型的事件来进行通知。
@WiredPrarie 我没有提供比组件层次结构的结构和这些组件构造中使用的 JSON 更多的代码，因为我遵循的是 reactjs 和通量的基本实现，而不是真的很确定是否有任何其他代码会有很大用处。你有什么建议吗？

标签： reactjs reactjs-flux flux

【解决方案1】：

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

在 Flux 应用程序中，数据流入最顶层的组件并向下传递给子组件。从这个角度来看，我相信您的问题可以改写为：“如何让子组件更改通量存储中的数据？”

我在 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 下的通量概述中大部分内容都在较高级别进行了介绍。

希望对您有所帮助！祝你好运！

【讨论】：

【解决方案2】：

您的问题似乎是您对状态的使用（或缺乏）。我认为您可能必须提取一些细节来说明，以便当它在任何地方更新时，它会级联到视图的其他部分。就像是您的日历对象中的“shiftAssignee”似乎是一个很好的参数来观察状态。

【讨论】：

【解决方案3】：

我看到你用reactjs-flux 标记了这个，但到目前为止你似乎还没有考虑过实现 Flux 存储和操作。 Flux 是一种可以帮助实现这种数据流的模式，但是如果您对 Flux 感兴趣，则需要一路实现存储、操作和事件侦听器。

使用此应用的 Flux 实现，两个组件都应监听有关员工数据更改的商店事件，该事件可能会在员工被分配到轮班时触发。然后他们可以获取新数据并更新他们的显示（以显示轮班已满并显示员工在该块期间忙碌/更新他们的计划总小时数）。选择空班次应触发不同的事件（创建并调度一个动作，如果需要，在日历存储中记录活动班次，发出一个事件以通知组件某个班次已准备好填充），组件可以自行更新（可能会询问商店现在哪个班次处于活动状态）。

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

【讨论】：