Fatal编程技术网
  • javascript/
  • Javascript 使用react create应用程序登录Facebook

Javascript 使用react create应用程序登录Facebook

javascript reactjs

Javascript 使用react create应用程序登录Facebook,javascript,reactjs,loading,facebook-login,create-react-app,Javascript,Reactjs,Loading,Facebook Login,Create React App,我使用创建React应用程序模块制作了一个React Web应用程序。我正在尝试添加Facebook登录，但有问题 我不知道从哪里异步加载Facebook JavaScript SDK以使用FB.init、FB.getLoginStatus等。我尝试在index.html文件中放入一个脚本标记，并按如下方式加载： <!doctype html> <html lang="en"> <head> <meta charset="utf

我使用创建React应用程序模块制作了一个React Web应用程序。我正在尝试添加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>


反应应用程序
window.fbAsyninit=函数（）{
FB.init({
appId:'1830088130643938'，
自动假肢：对，
xfbml：是的，
版本：“v2.9”
});
FB.AppEvents.logPageView（）；
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
但是当我试图访问index.js（createreact应用程序的起点）中的FB变量时，它说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'));

从“React”导入React；
从“react dom”导入react dom；
//导入CSS文件
导入“./index.css”；
//导入组件
从“./App”导入应用程序；
从“./components/FacebookButton”导入FacebookButton；
log（“正在运行index.js”）；
window.fbAsyninit=函数（）{
FB.init({
appId:'您的应用程序id'，
自动假肢：对，
xfbml：是的，
版本：“v2.9”
});
FB.AppEvents.logPageView（）；
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
console.log（“FB是：”，FB）；
ReactDOM.render（，document.getElementById（'root'））；
只有当我在public下创建一个单独的javascript文件，通过index.html文件链接它，并在那里登录我的所有facebook时，它才起作用。但是如何使用它从index.js文件访问FB变量呢

我需要index.js中的FB变量，因为这是根据create-react-app的工作方式启动的javascript文件。我希望将FB变量传递给我的其他组件，以创建状态、处理单击、登录检查等

也许我不了解createreact应用程序是如何工作的，以及如何定制javascript或异步加载JDK

请告诉我如何使用create react应用程序登录facebook。

登录facebook的最简单方法是使用。你可以使用npm模块。

我以前看过这个模块，但只是想知道如何手动完成。我想了解更多如何在create react应用程序中加载SDK并异步加载它们。