Question

我有一个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>
    );
  }
}

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

知道我哪里出错了。我很确定我在父母和孩子之间错误地传递了东西。我尝试了在构造函数和传递给子节点时使用绑定的不同方法。

Answer 1

您作为道具传递登录，您还应该将其作为道具进行访问。

onClick应该以this.props.login

的形式访问它

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

Answer 2

在Login.jsx中

应该是this.props.login

Answer 3

将您的App.js登录行更改为

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

并在Login.jsx

中

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

并执行此操作

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

React - 家长没有将方法传递给孩子

3 个答案: