javascript - 从另一个组件切换状态

Question

我是 React 和 Redux 的新手，所以我可能完全以错误的方式做这件事，事实上，从这里对类似问题的其他一些答案来看，我怀疑我做错了很多。

我的“布局”组件中有一个按钮，它将一个类添加到一个 div，这个类来自一个状态。该按钮是一个开关，将打开和关闭状态和类(这将导致出现一个菜单并使页面的其余部分变暗)。

但是，我还希望与“Nav”组件(位于“Header”组件内，而“Header”组件又位于“Layout”中)的任何交互也可以切换状态和类(因此单击链接会折叠菜单)。在 jQuery/VanillaJS 中，这非常简单，但我似乎无法弄清楚 React/Redux 的方法。

布局组件:https://pastebin.com/WzpbeSw7

header 组件:https://pastebin.com/c34NFtUx (可能不相关，但在这里供引用)

导航组件:https://pastebin.com/EsJDuLQc

Answer 1

通过使用 redux :

您可以拥有类似 toggleBlaBla 的状态:“显示”。如果您使用 react-redux 将您的 React 组件连接到 redux 状态，则每当您发送将 toggleBlaBla 更改为“隐藏”的操作时，您连接的组件将重新呈现。

仅使用 react :

如果您希望两个组件通过某些事件更改某些 ui 状态，将它们放在容器组件中是个好主意，这样每当您的状态发生更改时，这两个组件都会重新呈现，并将更改后的状态传递给这两个组件。