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中的普通页面插件：

<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/

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

2 个答案: