我正在使用React创建SPA移动应用。我想知道如何使用Flux方式创建导航控制器或标签栏控制器。基本上我想知道我如何处理孩子的所有权以及谁/什么处理实际的过渡。
现在我有一个navigationController组件，它有一个push方法，可以将页面添加到堆栈中并将它们转换出来。所有这些都存储在状态中，父组件对此一无所知。
对于我的标签栏控制器，父组件传入一些tabBar项目，tabBar项目的子项是选项卡处于活动状态时要显示的内容。标签栏控制器处理选项卡处于活动状态时以及基于活动选项卡显示的内容。父母不知道哪个标签处于活动状态。活动选项卡存储在选项卡栏控制器的状态中。
这样的东西似乎并不容易在Flux中实现。我如何从父母那里告诉导航控制器添加一个元素，然后处理从控制器内部的转换。此外，如果新页面必须一直到根目录，那么添加到控制器的页面如何才能推送新页面？
我想我的问题可能是我不完全了解Flux。
非常感谢任何帮助。
答案 0 :(得分：3)
听起来你在组件中做得太多了。有很多方法可以实现Flux架构，但通常最容易思考的方法是假设你几乎从不使用状态，只有道具。关于哪些选项卡可用以及哪些活动将进入React组件外的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将通过TabStore发送操作。有关详细信息，请参阅the Flux docs。
setActiveTab处理TabBar操作，并更新其内部状态。如果活动标签已更改，则会发出更改事件。
根组件接收更改事件，更新状态，并将新道具传递给{{1}}。
这里没有任何React组件跟踪自己的状态 - 这是商店的工作。这样可以在业务逻辑和视图之间保持真正清晰的分离。它还避免了任何＆＃34;父母如何知道选择了什么标签＆＃34;问题，因为父母也在接收标签状态。