React JS加载FB共享

Question

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

我怎么是一个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 FB.init:

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
}