Question

因此，我有一个文件routes.jsx，用于处理应用程序的路由。在react-router-dom的{{3}}之后，我想开始进行登录/注销。

目前，我已经实现了一个fakeAuth对象，该对象将针对后端进行身份验证并设置一个isAuthenticated var。但是，我认为我需要能够将此身份验证传递给不同的组件，例如Login.jsx，以实际更改isAuthenticated的状态，并假设NavBar.jsx，因此我可以将登录按钮更改为注销按钮（为清楚起见，我所有的组件都是使用钩子的功能组件（正在尝试），并且不以类的方式扩展React.Component。

但是，如何传递fakeAuth作为道具，并且仍然可以访问内部的方法？如果我在fakeAuth组件内声明Login.jsx，则定义fakeAuth。如果我将其作为道具传递，则认为未定义。

routes.js

export default (
  <BrowserRouter>
    <Route path='/'>
      <LandingPage fakeAuth={fakeAuth}/>  // Landing page has the NavBar component as a child.
    </Route>

    <Switch>
      <Route path="/login">
         <Login fakeAuth={fakeAuth}/> // I want the Login component to have access to fakeAuth.whatever
      </Route>
      <PrivateRoute path="/home">
        <UserApp/>
      </PrivateRoute>
    </Switch>
  </BrowserRouter>
);

const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    fakeAuth.isAuthenticated = true;
    setTimeout(cb, 100); // fake async
  },
  signout(cb) {
    fakeAuth.isAuthenticated = false;
    setTimeout(cb, 100);
  }
};

Login.jsx

const Login = ({fakeAuth}) => {
  let history = useHistory();
  let location = useLocation();

  let { from } = location.state || { from: { pathname: "/home" } };
  let login = () => {
    fakeAuth.authenticate(() => {   // Need to access authenticate.
      history.replace(from);
    }); 
  };
  return (
    // login modal etc
    <button onClick={login}>Log in</button>
  );
}

上面的代码是返回fakeAuth is undefined的代码。

任何建议都会很棒！

将对象传递给子对象，然后访问对象方法

0 个答案: