如何通过 onClick 从另一个组件打开模态组件

Question

这个问题与这个有关。 我正在重新措辞以使其简单。

我有一个主导航组件（MainNavigation.js），它是 Header 组件（Header.js）下的辅助导航组件（SecNavigation.js）的兄弟。

我想要的是当我单击 MainNavigation.js 中的特定链接时，整个 SecNavigation.js 将显示在模式中。

我的问题是我不太明白我应该如何使用 useState、useContext 或者即使我需要任何这些 go。

Answer 1

希望这会为你清除一些东西

您需要的是一个处理 state 的父级，然后它将其传递给它的子级。 因为父母正在跟踪孩子以及他们在做什么。

所以我做了什么：

App.js 是父级，我在这里处理 state。 然后我只需将setIsModalShowing setState function 传递给 MainNav，它会在我按下按钮时调用它。

然后在 App.js 中，如果setIsModalShowing为true或false ，我将显示或隐藏模式

在模态内部，我正在显示SecNav ，并且模态还传递了setIsModalShowing ，以便您可以单击按钮关闭 is，这会将 state 设置为 false。

这对你有意义吗？ 否则我可以尝试用另一种方式解释

代码示例