Question

我正在尝试按照本教程：http://www.automationfuel.com/firebase-facebook-login-react/

但是，我认为有些部分缺失了，我无法确切知道要改变什么才能使演示运行。这就是我现在所拥有的：

import React from 'react';
import ReactDOM from 'react-dom';
import firebase from 'firebase';
import reactfire from 'reactfire';

var config = {
 apiKey: "legitimate value",
 authDomain: "legitimate value",
 databaseURL: "legitimate value",
 storageBucket: "legitimate value",
 messagingSenderId: "legitimate value"
};
firebase.initializeApp(config);
var provider = new firebase.auth.FacebookAuthProvider();
this.state = {user: null};

loginWithFacebook() {
    firebase.auth().signInWithPopup(provider).then(function(result) {
    var token = result.credential.accessToken;
    this.setState({user: result.user});
}.bind(this));
}

logOut() {
  firebase.auth().signOut().then(function() {
  this.setState({user: null});
}.bind(this));
}

const user = this.state.user;
render() {
  return(
  <div>
  <p>Hi, {user.displayName}!</p>
  <button onClick={this.loginWithFacebook.bind(this)}>Login with Facebook</button><button onClick={this.logOut.bind(this)}>Log Out</button>
</div>
)
};

ReactDOM.render(
 <h1>Hello world!</h1>,
 document.getElementById('root')
);

有关如何启动并运行的任何想法......？我当前的错误是围绕loginWithFacebook()，logOut()和render()函数的语法问题。我尝试将函数关键字放在这些函数前面，但是当this.setState尝试执行时，我遇到了未定义的错误。

在谷歌搜索我的所有问题后，我能够让演示工作。这是代码：

import React from 'react';
import ReactDOM from 'react-dom';
import firebase from 'firebase';
import reactfire from 'reactfire';

export class App extends React.Component {

 constructor(){
 super();

 this.state = {user: null, isLoggedIn: false};
 }

loginWithFacebook() {
      firebase.auth().signInWithPopup(provider).then(function(result) {
        var token = result.credential.accessToken;
        this.setState({user: result.user, isLoggedIn: true});
      }.bind(this));
    };

  logOut() {
    firebase.auth().signOut().then(function() {
      this.setState({user: null, isLoggedIn: false});
    }.bind(this));
  };

  render() {
    const currentState = this.state;
    return(
      <div>
        <p>Hi! {currentState.isLoggedIn ? currentState.user.displayName : ''}</p>
        <button onClick={this.loginWithFacebook.bind(this)}>Login with Facebook</button><button onClick={this.logOut.bind(this)}>Log Out</button>
      </div>
    )
  };
}

var config = {
  apiKey: "data",
  authDomain: "data",
  databaseURL: "data",
  storageBucket: "data",
  messagingSenderId: "data"
};
firebase.initializeApp(config);
var provider = new firebase.auth.FacebookAuthProvider();


ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

Answer 1

您需要将方法放在class中，然后必须呈现class组件。见下面的例子：

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      user: null
    }  
  }

  loginWithFacebook() {
     ...
  }

  logOut() {
    ...
  }

  render() {
    const user = this.state.user;

    return (
      ...
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

使用reactjs和firebase设置一个简单的登录页面

1 个答案: