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

Posted 2023-02-23

【中文标题】如何将状态从一个组件文件传递到另一个组件文件

【英文标题】：How to pass state from one component file to another

【发布时间】：2021-03-01 15:08:28

【问题描述】：

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

【问题讨论】：

首先在您的父组件中使用状态（例如：useState），您创建一个可以更新状态变量的函数，然后将它们传递给子组件，仅此而已（概念）

但是组件不是子组件，它在一个单独的文件中。

是的，你可以在另一个文件中拥有孩子，这就是为什么会有导入指令

【参考方案1】：

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

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

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