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

【问题标题】：How to call a method from parent/another component如何从父/另一个组件调用方法
【发布时间】：2019-12-11 14:38:12
【问题描述】：

问题似乎很简单：我有一个主要的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 中的项目。这里的任何同事都可以解释一下吗？提前谢谢。

【问题讨论】：

查看 React props 将你的函数传递给下一层的子节点，或者 React Context 将它传递到下一层

标签： reactjs import local-storage logout

【解决方案1】：

您需要使用Context Api。我制作了一个gist，它有一个简单的方法。

你犯了一个简单的错误

你可以从一个类中导入一个方法

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

我不确定您是如何进行此导入的，但是

如果onLoggedOut 在App 内，则不能进行这种类型的导入。
如果onLoggedOut 在App 之外，它永远不会工作，因为它使用this.setState。

您需要一些名为Lifting State Up 的东西，但对于身份验证，最好使用Context Api。我做了一个gist（有点类似，但更适合你的情况）。

【讨论】：