我正在使用 React 创建一个 SPA 移动应用。我想知道如何使用 Flux 方式创建导航控制器或标签栏控制器。基本上我想知道我如何处理孩子的所有权以及谁/什么处理实际的过渡。
现在我有一个 navigationController 组件，它有一个 push 方法可以将页面添加到堆栈中并将它们转换为 out。所有这些都存储在 state 中，父组件对此一无所知。
对于我的选项卡栏控制器，父组件传入一些选项卡项，选项卡项的子项是选项卡处于活动状态时显示的内容。选项卡栏控制器处理选项卡何时处于活动状态以及根据活动选项卡显示的内容。父母对哪个选项卡处于活动状态一无所知。活动选项卡存储在选项卡栏控制器的状态中。
这样的东西在 Flux 中似乎并不容易实现。我将如何从父级告诉导航控制器添加一个元素，然后从控制器内部处理转换。另外，如果添加到控制器的页面必须一直到根目录，它们如何能够推送新页面？
我想我的问题可能是我没有完全理解 Flux。
任何帮助将不胜感激。
【问题讨论】：
听起来您在组件方面做得太多了。实现 Flux 架构的方法有很多，但通常最容易思考的方法是假设您几乎从不使用 state，只使用 props。所有关于哪些选项卡可用以及哪些选项卡处于活动状态的逻辑都将进入 React 组件之外的TabStore。基本通量流可能是这样的：
TabStore 保留选项卡和内容的内部列表，并跟踪activeTab。它公开了一个类似.getTabs() 的方法，以允许视图访问当前状态。它还公开了EventEmitter 方法以允许它发布更改。
应用程序中的根组件设置了一个监听器来监听标签存储中的变化。最简单的版本是这样的：
_onChangeTabStore: function() {
this.setState({
tabs: TabStore.getTabs(),
activeTab: TabStore.getActiveTab()
});
},
然后根组件将tabs 和activeTab 作为道具传递给您的TabBar 组件。它还可能传递一个处理程序，例如：
onTabClick: function(clickedTab) {
TabActions.setActiveTab(clickedTab);
},
TabActions.setActiveTab 将通过AppDispatcher 发送一个动作。有关详细信息，请参阅the Flux docs。
TabStore 处理 setActiveTab 操作，并更新其内部状态。如果活动选项卡已更改，它会发出更改事件。
根组件接收更改事件，更新状态，并将新的道具传递给TabBar。
这里没有任何 React 组件跟踪自己的状态——这是 store 的工作。这在业务逻辑和视图之间保持了非常清晰的分离。它还避免了任何“父级如何知道选择了哪个选项卡”的问题，因为父级也正在接收选项卡状态。
【讨论】：