如何将“用户”对象从我的 TopBar.js 导出到 App.js？

Question

TopBar.js 基本上是一个处理身份验证的 AppBar 组件，如果用户登录，我会得到一个对象“用户”，如何将这个“用户”对象导出到 App.js？

如果我设法将其导出到 App.js，我想将其导出到另一个组件创建，该组件可以处理向我的数据库添加内容

我正在使用 React 和 Firebase

这是我的 useEffect 函数

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged((authUser) => {
    if (authUser) {
      // if user has logged in...
      setUser(authUser)
      if(authUser.displayName){   }
      else{
        return authUser.updateProfile({
          displayName : userName
        });
      }
      
    } else {
      // if user has logged out... 
      setUser(null);
    }
    
  })
  return () => {
    // perform some cleanup actions
    unsubscribe();
  }
}, [user, userName]);

Answer 1

在App.js 文件中，您可以创建一个处理此问题的上下文。在这种情况下，您有：

const AuthContext = createContext();

现在可以使用 Provider 组件来包装整个应用程序，如下所示：

// the user value comes from the state created
<AuthContext.Provider value={{user}}>
  
</AuthContext.Provider>

然后你可以使用useContext钩子从任何组件访问这个用户值：

const { user } = useContext(AuthContext);

// you can go on and access the `user` value anywhere in the component  

您可以访问this article进行深入解释