如何加载facebook页面插件与反应

Question

具有讽刺意味的是,没有反应facebook插件......

我想在我的网站上显示facebook页面插件(内置在React中),但没有显示.

我有默认的javascript术语(我添加async无效):

<div id="fb-root"></div>
<script>
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.async=true;
        js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6&appId=";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

和render我的react组件中的普通页面插件:

<div className="fb-page"
    data-href="https://www.facebook.com/facebook/"
    data-tabs="timeline"
    data-width="500"
    data-height="400"
    data-small-header="true"
    data-adapt-container-width="true"
    data-hide-cover="false"
    data-show-facepile="false">
    <blockquote className="fb-xfbml-parse-ignore"
                cite="...
</div>

如何让它加载异步？

Answer 1

sdk在完成加载脚本后调用一个函数,调用fbAsyncInit:

window.fbAsyncInit = function () {
    FB.init({
        appId: '82195',
        xfbml: false,
        version: 'v2.6'
    });
    document.dispatchEvent(new Event('fb_init'));
};

如图所示,我在调用回调时调度一个事件; 因为它表明SDK已加载.由于问题是反应加载并在sdk之前执行,因此可以将一个侦听器添加到组件中,然后可以在收到通知时加载FB插件:

componentDidMount() {
    document.addEventListener('fb_init', e => FB.XFBML.parse());
}

Answer 2

这就是您所需要的：https : //developers.facebook.com/docs/reference/javascript/FB.XFBML.parse

例如：

componentDidMount() {
     FB.XFBML.parse();
}
componentDidUpdate() {
     FB.XFBML.parse();
}

最好给它一个 ID，否则它会检查 Facebook 插件的整个文档。当然，您必须确保已经加载了 JavaScript SDK，否则“FB”将是未定义的。您可以实现一个计时器来检查“FB”的可用性，直到它可用（坏主意），或者稍后加载组件 - 当 JS SDK 确定加载时。

有关检查何时加载 JS SDK 的更多信息：http : //www.devils-heaven.com/facebook-javascript-sdk-login/