Facebook 反应JS加载FB共享

我正在尝试将facebook共享添加到我的react应用程序中。关于添加FB.XFBML.parse（）的Stackoverflow有很多细节

无论我是一个什么样的lint错误“FB未定义”。加载FB的最佳方式是什么

编辑 添加了window.fbAsyninit函数

"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;

---

你正在试图执行

  FB.init();
  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();
  };

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

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

分配给window.fbasyninit的函数将在SDK启动后立即运行 已加载。加载SDK后要运行的任何代码 应放置在此函数中，并在调用FB.init之后。 例如，您可以在此处测试服务器的登录状态 用户或订阅应用程序所在的任何Facebook事件 感兴趣

此外，您应该在加载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'));

---

只能在

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文件。你也应该考虑把脸谱网的东西放在一个单独的文件中，这样你可以在将来的项目中使用它。但首先，确保它有效，并确保你了解发生了什么

请记住，您可能还需要在

componentdiddupdate

中使用

FB.xfml.parse

。您必须确保已经为此加载了JSSDK

componentDidMount

只会被调用一次，如果您转到另一个路由并返回到此组件，它将被缓存，您需要再次解析社交插件

有关JS SDK的更多信息：

您可以通过在文件头使用

/*global FB*/

或（更好）在.eslintrc文件中定义FB（如果使用ESLint）：

"globals": {
    "FB": true
}

---

如果您想在react页面中添加任何社交共享按钮，那么您可以尝试npm模块react share，这与FB、Twitter等的原生API相比非常简单

---

示例react在

处共享代码片段，谢谢！，我加了这个。但我仍然得到了皮棉的错误。此外，我已将此添加到上面的示例中。我已编辑了我的答案，默认情况下，FB.init需要参数，因为我已更新了我的答案。请确保您使用的FB对象未超出范围fbAsyncinti仍然存在lint错误FB未定义。我认为你对钱的评论超出了范围。但是我不知道如何定义FB。如果你没有定义FB对象，引导程序就是这么做的，你确定你没有在“componentDidMount”中使用FB对象吗？你甚至初始化了应用程序吗？FB.init需要一些参数。请优化代码的缩进，现在很难阅读。我已经删除了init。FB示例没有使用此选项。我的问题是lint说FB没有定义，我需要解决如何向reactjs注册它。如果你否决了一个答案，请解释原因。我很高兴能改进我的答案，因为有些地方出了问题。对我来说，这里被接受的答案是有效的。也许也会帮助其他人。谢谢，我不知何故错过了“linting”部分，所以我编辑了我的答案。我还在另一个线程中创建了一个新答案，因为将注释放在每个文件中不是一个好的解决方案：不实现回调以了解共享是否成功：(