有没有办法让两个兄弟组件在 ReactJS 中异步了解状态？

【问题标题】：Is there a way to make two sibling components have asynchronous knowledge of a state in ReactJS?有没有办法让两个兄弟组件在 ReactJS 中异步了解状态？
【发布时间】：2020-11-18 14:50:27
【问题描述】：

我有两个组件：NavBar 和 SignUp。

在我的 SignUp 组件中，我通过状态变量跟踪用户当前是否登录。

根据 SignUp 中的上述状态变量，我的 NavBar 组件应该更改 （例如，“登录”图标应该更改为“退出” )。

两个问题：

1.我的导航栏如何知道注册状态？

2.它们如何根据注册状态保持同步、动态变化？

非常感谢任何帮助！谢谢。

【问题讨论】：

标签： javascript reactjs authentication state logoff

【解决方案1】：

从SignUp 的JSX（即：<NavBar myProp={123}/>）向Navbar 传递一个prop，就像您添加一个属性一样，将导致NavBar 在它更改时自动更新。

查看React's official docs 了解有关传递道具的更多信息。

【讨论】：

是的，但这是父子关系。也就是说，这意味着 SignUp 将呈现 NavBar。
我的 NavBar 和 SignUp 都使用 App.js 上的路由器/交换机配置呈现，因此它们是兄弟组件
然后你可以使用global hooks、Redux 或传递给SignUp 和Navbar 的父元素和修改相同属性的回调。