将Facebook Web SDK与ReactJS组件状态集成

是的，您是对的，可以很好地将Facebook登录信息与react组件集成在一起。

示例登录组件可以是这样的-

import React from 'react';class LoginComponent extends React.Component {  constructor(props) {    super(props);    this.state = {    };  }  loadFbLoginApi() {        window.fbAsyncInit = function() { FB.init({     appId      : FB_APP_ID,     cookie     : true,  // enable cookies to allow the server to access     // the session     xfbml      : true,  // parse social plugins on this page     version    : 'v2.5' // use version 2.1 });        };        console.log("Loading fb api");          // Load the SDK asynchronously        (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs);        }(document, 'script', 'facebook-jssdk'));  }  componentDidMount() {        this.loadFbLoginApi();    }    testAPI() {      console.log('Welcome!  Fetching your information.... ');      FB.api('/me', function(response) {      console.log('Successful login for: ' + response.name);      document.getElementById('status').innerHTML =        'Thanks for logging in, ' + response.name + '!';      });    }    statusChangeCallback(response) {      console.log('statusChangeCallback');      console.log(response);      if (response.status === 'connected') {        this.testAPI();      } else if (response.status === 'not_authorized') {          console.log("Please log into this app.");      } else {          console.log("Please log into this facebook.");      }    }    checkLoginState() {      FB.getLoginStatus(function(response) {        this.statusChangeCallback(response);      }.bind(this));    }    handleFBLogin() {        FB.login(this.checkLoginState());        }    render() {        return (     <div>         <MyButton  classNames = "btn-facebook"  id         = "btn-social-login"  whenClicked = {this.handleFBLogin}  >      <span className="fa fa-facebook"></span> Sign in with Facebook         </MyButton>     </div>    );    }}export default LoginComponent;

连接收到的响应状态后，这意味着用户已通过Facebook登录，您可以在组件上设置状态以反映该状态。例如

response.status === 'connected'this.setState({userLoggedIn:true});

我

MyButton