如何从父/另一个组件调用方法

Question

问题似乎很简单：我有一个主要的App，它具有登录和注销方法，以及其他功能：

  onLoggedIn(authData) { // need to use both the user and the token
    console.log(authData); // authData logged in console
    this.setState({
      user: authData.user.username //authData.user.username saved in userState
    });
    // saves token and user from handleSubmit in local storage 
    localStorage.setItem('token', authData.token); 
    localStorage.setItem('user', authData.user.username);
    this.getMovies(authData.token); // retrieves films list
  }

  onLoggedOut() {
    this.setState({
      user: null
    });

    localStorage.clear();
  }    

onLoggedOut由导航栏按钮（也是子组件）使用：

function MyNavbar() {
  return (
    <Navbar bg="#781820" expand="lg">
      <Navbar.Brand className="logo">
        <h1>App Name</h1>
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link className="text-white ml-5">Home</Nav.Link>
        </Nav>
        <Form inline>
          <Button id="btn-logout" type="submit" onClick={() => this.onLoggedOut()}>Logout</Button>
        </Form>
      </Navbar.Collapse>
    </Navbar>
  );
}

但是，尽管事实上我已尝试将方法和/或组件导入子组件：

import { onLoggedOut } from '../App/App;
import { App } from '../App/App';

onLoggedOut方法无效。该方法有效（如果我将按钮放在主App中，它将清除localStorage中的项目。请在这里的任何同事都可以介绍一下，请先谢谢。

Answer 1

您将需要使用Context Api。我已经制作了一个gist，对此有一种简单的方法。

您正在犯一个简单的错误

您可以从类中导入方法

import { onLoggedOut } from '../App/App';
import { App } from '../App/App';

我不确定您的导入方式，但是

• 如果onLoggedOut在App内部，则无法进行该类型的导入。
• 如果onLoggedOut在App之外，它将永远无法工作，因为它使用了this.setState。

您需要一些被称为Lifting State Up的东西，但是对于身份验证，最好使用Lifting State Up。我做了一个Context Api（有点一样，但对您来说更好）。