Javascript React-父对象未将方法传递给子对象

我有一个React/Firebase应用程序。我正在尝试制作一个使用谷歌登录firebase auth的按钮

当从登录方法所在的

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>
    );
  }
}

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Redirect}；
从“/Status”导入状态；
从“./Login”导入登录名；
从“./Navigation”导入导航；
从“../firebase”导入{auth，provider}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
authUser:null
};
}
componentDidMount（）{
auth.onAuthStateChanged（（authUser）=>{
if（authUser）{
this.setState（{authUser}）；
} 
});
}
登录=（）=>{
授权登录弹出窗口（提供程序）
。然后（（结果）=>{
const user=result.user；
这是我的国家({
authUser:user
});
})
.catch（（错误）=>{
log（'Error loggin'，err）；
});
}
注销=（）=>{
auth.signOut（）
.然后（（）=>{
这是我的国家({
authUser:null
});
});
}
render（）{
返回(
...
this.state.authUser？：}/>
...
);
}
}

Login.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>
    );
  }
}

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

import React，{Component}来自'React'；
类登录扩展组件{
render（）{
返回(
使用谷歌登录
);
}
}

---

知道我哪里出错了吗。我很确定我在父母和孩子之间传递的东西是错误的。我在构造函数中和传递给子对象时尝试了不同的bind方法。

如果您将登录名作为道具传递，您也应该作为道具访问它

onClick应该以this.props.login的身份访问它

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

使用谷歌登录

在Login.jsx中，应该是这个.props.Login

将App.js登录行更改为

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

<Login authUser={this.state.authUser} login={this.login.bind(this)}/> }/>

---

它应该是登录组件中的

onClick={this.props.login}

。我花了很长时间想弄清楚，现在我想打自己一巴掌。谢谢bind（）调用应该不是必需的，事实上可能会产生不希望的结果，因为登录函数很可能需要使用父组件的上下文。如果没有绑定，则登录中的“this”是未定义的。我的理解是胖箭头函数会自动从其封闭类继承

this

。如果这不是真的，那么只需要第一次绑定。可以删除第二个绑定，并且

login（）

函数可以保持与OP中相同的状态。