如何将状态从一个组件文件传递到另一个组件文件

Question

我有两个文件 signup.js 和 signin.js。当用户完成登录时，isUserSignedIn 状态从 false 变为 true。现在我想在 home.js 文件中的组件 Home 中显示用户的数据。如何在这些组件之间传递状态？

Answer 1

如果某些数据需要在多个不是直接父/子的组件之间共享（我假设 Home.js 不是其他组件的子），那么您需要设置一个共享状态工具，例如：

• Redux (https://react-redux.js.org/)
• 上下文 (https://reactjs.org/docs/context.html#gatsby-focus-wrapper)
• 许多其他人

如果组件之间的距离不是太远（祖父母/父母）并且您不需要与另一个远距离的组件共享数据，则通过 props 传递给子组件的组件本地状态是一个很好的（并且非常简单）的解决方案。