設置了reactjs和簡單的登錄頁面火力

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試圖執行時，我得到了未定義的錯誤。

在用我的方式通過我所有的問題googling後，我能夠得到演示工作。下面是代碼：

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