在React中动态更新导航栏和边栏的最佳方法是什么?

时间:2018-09-17 23:33:12

标签: javascript reactjs redux react-context

我为我的react应用创建了一个布局组件,我想在路线更改时动态更新侧栏和导航栏。

  1. 我可以使用redux,但是即使不需要它们,所有状态和方法也将始终可用。

  2. 我也查看了新的react上下文,但是它和redux一样有问题。

  3. 使用React Router,看起来我只是在安装新的侧边栏或导航栏。

是否可以为布局组件动态提供新的状态和方法?
(将状态替换为其他状态,或一次替换多个状态:苹果->橙色)

反应路由器看起来是我最好的选择,但是我可以通过在每条新路线中都包含侧边栏和导航栏来做同样的事情。

动态添加链接不是问题,添加影响新安装组件的按钮是问题。导航栏和侧栏位于父组件中,因此他们需要了解所有状态和方法。

谢谢

编辑:

示例:


-主页-关于-联系方式

没问题,链接。我可以使用switchComponet方法将链接组件替换为任何其他组件。


停止-加速-帮助

这些都是按钮。现在,我需要将其方法和状态添加到Layout组件中。随着应用程序的增长,需要将更多状态和方法添加到顶部组件。 我可以将它们全部放在redux中,但是所有状态和方法始终可用。我对redux的印象可能是错误的,我认为它可能会占用很多资源,但是我可能是错的。

1 个答案:

答案 0 :(得分:0)

我的猜测是,“状态和方法”是指布局组件中react-redux connect函数的mapStateToProps和mapDispatchToProps参数。

如果是这种情况,那么您就有理由担心在其中放置布局的所有可能内容的逻辑。

我认为您的问题是,您假设情况并非如此,您只需要将顶级容器连接到redux。

您可以连接布局组件以处理导航栏和侧边栏,同时使组件嵌套在布局组件中,并使用其自己的存储键(存储状态的一部分)和操作连接到redux。

这样,您无需添加每个布局内容所需的所有存储状态和操作。每种布局的内容都将保持其逻辑。

这实际上是redux的目的之一。