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

Question

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

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

2. 我还查看了新的 react 上下文，但它与 redux 有相同的问题。

3. 使用反应路由器，看起来我只是在安装一个新的侧边栏或导航栏。

有没有办法为我的布局组件动态提供新的状态和方法？
（将状态替换为不同的状态，或多个新的一次：apple --> orange）

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

动态添加链接不是问题，添加一个影响新挂载组件的按钮才是问题。导航栏和侧边栏位于父组件中，因此它们需要了解所有状态和方法。

谢谢，

编辑：

例子：

---

- 首页 - 关于 - 联系方式

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

---

停止 - 加速 - 帮助

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

Answer 1

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

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

我认为您的问题是您假设您必须仅将顶部容器连接到 redux，而事实并非如此。

你可以连接你的布局组件来处理导航和侧边栏，同时让组件嵌套在你的布局组件中，并通过它们自己的存储键（存储状态的一部分）和操作连接到 redux。

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

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