阵营：最好的方法，从一个普通的“数据提供者”过滤器将数据传递给兄弟姐妹

Question

我创建一个分析网页（认为谷歌Analytics（分析），等等）与反应。

我有一个封装中可用的不同的页面（一个概述，然后具体的下钻）的主要组分。

function Analytics(props) { 
    return (
    <div id="main" className="analytics"> 
     <AnalyticsFilter /> 
     <div id="content"> 
     <div id="contentsub"> 
      {props.children} 
     </div> 
     </div> 
    </div> 
); 
} 

的AnalyticsFilter是过滤显示的数据的方式 - 它是所有页面相同，因此，为什么它包括在这里。这个想法是，显示数据的组件（props.children）会从过滤器请求它，然后过滤器会懒惰地加载数据（并可能缓存数据），因为多个组件可能以不同的方式显示相同的数据（图表，表格，top10等）。

我的问题：什么是方便网页上的任何部件和组件AnalyticsFilter之间通信的理想方式？

过滤器都提供4-6个不同的数据集（都基于相同的过滤器参数），但我不希望查询所有这些对于在不需要它的页面（即一个特定的观点只关心特定的数据集）。

至于应该能够

1. 请求特定类型的数据集的这样的组件，并
2. 当滤波器参数更新自动更新。

所有事情都是开放的，因为我刚刚开始（对React而言是相当新的）。这里的Analytics组件可以很容易地被重写，以包含更多的功能，如果这使得它更容易。

Answer 1

我会看看通量flux结构与反应完全符合。该体系结构的良好实施是redux。

的基本概念是，用户在你的观点进入一切触发这是在调度员处理，并保存在存储操作。然后商店触发视图重新渲染，例如，调度员将过滤器应用于数据，将过滤的数据保存到存储中，并且视图呈现过滤的数据。