修改

添加了window.fbAsyncInit函数。

"use strict";

var React = require('react');
var Router = require('react-router');
var Link = Router.Link;
var ThanksPage = React.createClass({
componentDidMount: function() {

            (function (d, s, id) {
            const fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
              return;
            }
            const js = d.createElement(s); js.id = id;
            js.async = true;
            js.src = '//connect.facebook.net/fr_CA/sdk.js';
            fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

            window.fbAsyncInit = function() {
                FB.XFBML.parse();
            };


    },
    render: function() {
                    return (
                    );
    }
    });

    module.exports = ThanksPage;

Answer 1

您只能在FB.init之后使用FB：

componentDidMount() {
    window.fbAsyncInit = function() {
        //SDK loaded, initialize it
        FB.init({
            appId      : 'your-app-id',
            xfbml      : true,
            version    : 'v2.6'
        });
        //JS SDK initialized, now you can use it
        FB.XFBML.parse();
    };

    //load the JavaScript SDK
    (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'));
}

此外，请确保将其与服务器（公共或本地主机）一起使用，不要只在浏览器中打开html文件。您还应该考虑将Facebook内容放在单独的文件中，以便在将来的项目中使用它。但首先，确保它有效，并确保你了解发生了什么。

请注意，您可能还需要在FB.XFBML.parse中使用componentDidUpdate。您必须确保已经为此加载了JS SDK。 componentDidMount只会被调用一次，如果您转到另一个路径并返回到此组件，它将被缓存，您需要再次解析社交插件。

有关JS SDK的更多信息：http://www.devils-heaven.com/facebook-javascript-sdk-login/

您可以通过在文件头部使用/*global FB*/来消除掉落错误，或者（更好）通过在.eslintrc文件中定义FB（如果使用ESLint）来解决：

"globals": {
    "FB": true
}

Answer 2

您正在尝试执行

  window.fbAsyncInit = function() {
      // Example: Standard initialization code:
      FB.init({
        appId      : '{your-app-id}',
        status     : true,
        xfbml      : true,
        version    : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
      });
      FB.XFBML.parse();
  };

当SDK甚至没有加载时，当然，你会得到未定义的引用错误。

您缺少回调

window.fbAsyncInit = function() {
    // Example: Standard initialization code:
    FB.init({
      appId      : '{your-app-id}',
      status     : true,
      xfbml      : true,
      version    : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
    });
    FB.XFBML.parse();
};

(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
  return;
}
const js = d.createElement(s); js.id = id;
js.async = true;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

此代码异步加载SDK，因此不会阻止加载   您网页的其他元素。这对于确保尤为重要   为用户和SEO机器人加载快速页面。

上述代码中的URL是协议相对的。这让我们   浏览器通过与之相同的协议（HTTP或HTTPS）加载SDK   包含页面，这将阻止“不安全内容”警告。

分配给window.fbAsyncInit的函数在SDK完成后立即运行   已加载。加载SDK后要运行的任何代码   应该放在这个函数中并在调用FB.init之后。   例如，您可以在此处测试其登录状态   用户或订阅您的应用程序所在的任何Facebook活动   感兴趣。

此外，您应该在加载SDK之前设置回调

url <- "ftp://myurl"

filenames <- getURL(url, userpwd="myuserName:myPassword", ftp.use.epsv = FALSE, dirlistonly = TRUE)
destnames <- strsplit(filenames, "\r*\n")[[1]]
destnames <- destnames[1:1000]

Answer 3

如果您想在反应页面添加任何社交分享按钮，那么您可以尝试使用npm模块react-share，与FB，Twitter等原生API相比，这非常容易。

https://samvikshana.weebly.com/blog/react-share-social-share-widgets

的示例反应共享代码段

React JS加载FB共享

修改

3 个答案: