Question

我使用create-react-app模块创建了一个React Webapp。我试图添加Facebook登录但有问题。

我不知道在Facebook JavaScript SDK中异步加载到何处使用FB.init，FB.getLoginStatus等。我尝试在我的index.html文件中加入一个脚本标记并加载它：

   <!doctype html>
    <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>
    <div id="fb-root"></div>


    <!-- <script src="./facebookLogin.js"></script>-->
    <script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '1830088130643938',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.9'
    });
    FB.AppEvents.logPageView();
  };

  (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'));
</script>

  </body>
</html>

但是当我尝试访问index.js中的FB变量（create-react-app的起点）时，它说FB'没有定义为no-undef“。

然后我尝试在index.js文件中加载它，但同样问题：

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

// Importing CSS files
import './index.css';

// Importing components
import App from './App';
import FacebookButton from './components/facebookButton';

console.log("Running index.js right now");
 window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.9'
    });
    FB.AppEvents.logPageView();
  };

  (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'));

console.log("FB is: ", FB);


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

只有我在公共场所制作一个单独的javascript文件，通过我的index.html文件链接它并在那里登录我所有的facebook时才有效。但是如何使用这个？

从我的index.js文件中访问FB变量

我需要index.js中的FB变量作为起始javascript文件，根据create-react-app的工作原理。我希望将FB变量传递给我的其他组件来制作状态，处理点击，登录检查等。

也许我可能不理解create-react-app如何工作以及如何自定义javascript或异步加载JDK。

请告诉我如何使用create-react-app完成facebook登录。

Answer 1

进行Facebook登录的最简单方法是使用react-facebook-login。您可以使用npm模块here

Facebook登录使用react创建应用程序

1 个答案: