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