React JS 加载 FB 分享

Question

我正在尝试将 facebook 分享添加到我的 react 应用程序。 Stackoverflow 上有很多关于添加 FB.XFBML.parse() 的细节

我怎么会是一个 lint 错误“FB 未定义”。加载FB的最佳方式是什么？

编辑

添加了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 的内容放在一个单独的文件中，这样您就可以在未来的项目中使用它。但首先，请确保它有效并确保您了解正在发生的事情。

请记住，您可能还需要在 componentDidUpdate 中使用 FB.XFBML.parse。您必须确保已经为此加载了 JS SDK。 componentDidMount 只会被调用一次，如果你去另一个路由返回这个组件，它会被缓存，你需要重新解析社交插件。

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

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

"globals": {
    "FB": true
}

Answer 2

你正在尝试执行

  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.fbAsyncInit 的函数在 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'));

Answer 3

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

https://samvikshana.weebly.com/blog/react-share-social-share-widgets 的示例 react-share 代码 sn-p