我正在使用以下组件层次结构构建一个简单的React应用程序：
--- ReqList（显示请求项列表）
------ ReqListHeader（具有列表标题和一些按钮的div）
------ ReqTable（请求项列表）
--------- ReqRow（请求的一行）
------------ ReqItemHeader
------------ ReqItemBody
------------ ......介于两者之间的更多组件
--------------- ReqEditor
------------------ TextArea
根组件通过ajax调用接收数据并调用setState（数据），按照React的标准文档，一切都很好，这是正常的。我能够显示所有后代组件及其值。
但是对于表单输入（textarea），输入不会改变。我知道我必须实现一个更改处理程序。我不确定的是，在哪里实施它？
选项I： 我最初想过，我只需通过调用setState（）就可以在其直接所有者中添加一个changeHandler函数。但我担心通过在中级组件中引入状态来打破单向数据流原则。
选项II：我是否应该将changeHandler回调作为属性从“ReqRow”组件一直传递到ReqEditor，以便它可以绑定到textArea change event？< / p>
选项III：或者我应该从层次结构的根开始，即ReqList？这是因为，即使ReqRow也会从其所有者及其父级等接收数据，因为这是数据的入口点。
我不太确定，在这种情况下我应该做的向上传播水平。大多数示例都是具有两级层次结构的简单示例。我确信这可以完成，但涉及将更改处理程序回调从一直传递给它的大孩子。
这是正确的，还是有其他更好的方法？
答案 0 :(得分：1)
使用任何Flux模式实现解决您面临的问题。 React仅为数据呈现部分提供了解决方案，但它没有提供有关如何处理数据流的任何线索。
Flux是Facebook提出的一种模式，它试图构建您的应用程序，以便以干净的方式管理数据中的更改。
所有数据都作为中心枢纽流经调度程序。动作以动作创建者方法提供给调度员，并且通常源自用户与视图的交互。然后，调度程序调用商店已向其注册的回调，将操作分派给所有商店。在其注册的回调中，商店会响应与其维护的状态相关的任何操作。然后，商店发出更改事件以警告控制器视图已发生对数据层的更改。 Controller-views侦听这些事件并从事件处理程序中的存储中检索数据。 controller-views调用它们自己的setState（）方法，导致在组件树中重新呈现它们自己及其所有后代。
这个密集的段落是对您的问题的解决方案的总结。
编辑：您还可以使用baobab，这是一个提供可更新数据树的库，可在某些字段（或其子代）更新时发出事件。因此，每个组件都会监听所需字段的更改。有一个package for integrating it with React。我已经使用它并且效果很好。