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

What is the best way to dynamically update Navigation bar and side bar in React?

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

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

  2. 我也看了新的react context,和redux一样的问题

  3. 使用 React 路由器,看起来我只是安装了一个新的侧边栏或导航栏。

有没有办法为我的布局组件动态提供新的状态和方法?
(用不同的状态替换状态,或者多个新的一次:apple --> orange)

React 路由看起来是我的最佳选择,但我可以通过在每个新路由中包含侧边栏和导航栏来做同样的事情。

动态添加 links 不是问题,添加影响新安装组件的按钮才是问题。导航栏和侧边栏位于父组件中,因此它们需要知道所有的状态和方法。

谢谢,

编辑:

示例:


- 主页 - 关于 - 联系方式

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


停止 - 加速 - 帮助

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

我猜 "state and methods" 你指的是布局组件中 react-redux connect 函数的 mapStateToProps 和 mapDispatchToProps 参数。

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

我认为你的问题是你假设你只需要将顶级容器连接到 redux,而事实并非如此。

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

这样您就不需要添加每个布局内容所需的所有商店状态和操作。每个布局内容将保持接近其逻辑。

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