我正在尝试按照本教程: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')
);
答案 0 :(得分:2)
您需要将方法放在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")
);