javascript - React - 父级未将方法传递给子级

Question

我有一个 React/Firebase 应用程序。我正在尝试制作一个使用 google 登录进行 firebase 身份验证的按钮。

当从登录方法所在的 App.js 渲染时，我的按钮工作正常。当我尝试从登录组件调用它时，没有任何反应，没有错误，什么也没有

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import Status from './status';
import Login from './login';
import Navigation from './navigation';
import { auth, provider } from '../firebase';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      authUser: null
    };
  }

  componentDidMount() {
    auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        this.setState({ authUser });
      } 
    });
  }

  login = () => {
    auth.signInWithPopup(provider)
      .then( (result) => {
        const user = result.user;
        this.setState({
          authUser: user
        });
      })
      .catch( (err) => {
        console.log('Error Logging In', err);
      });
  }

  logout = () => {
    auth.signOut()
    .then(() => {
      this.setState({
        authUser: null
      });
    });
  }

  render() {
    return (
      <Router>
        <div className="App">
          <Navigation user={this.state.authUser} />

          ...

          <Route path='/auth' exact render={() => this.state.authUser ? <Redirect to='/status'/> : <Login authUser={this.state.authUser} login={this.login}/> }/>

          ...

          </div>
        </div>
      </Router>
    );
  }
}

登录.jsx

import React, { Component } from 'react';

class Login extends Component {
  render() {
    return (
      <div className="container">
        <button className="btn btn-primary" onClick={this.login}><i className="fab fa-google"></i> Sign In with Google</button>
      </div>
    );
  }
}

知道我哪里出错了。我很确定我在 parent 和 child 之间错误地传递了东西。我在构造函数中以及传递给子级时尝试了不同的绑定(bind)方法。

Answer 1

您将登录作为 Prop 传递，您也应该将其作为 Prop 访问。

onClick 应该以 this.props.login 的形式访问它

<button className="btn btn-primary" onClick={this.props.login}><i className="fab fa-google"></i> Sign In with Google</button>