Facebook 社交插件评论部分被类名隐藏（ReactJS）

Question

我正在使用 ReactJS（由 Facebook 开发），目前在显示来自 Facebook 社交插件的评论部分时遇到问题...有点讽刺，但是嘿，他们还没有为 React 制作插件。

无论如何，我已经在我的代码中插入了不同的元素来添加评论部分。当我加载页面时，我可以看到该部分正在加载！（不到一秒钟）但它很快就消失了。我检查了 facebook 生成的代码，发现它在我的元素的 class 中添加：FB_hide_iframes。我尝试删除它，该部分显示在我的页面中！

问题是我不知道如何控制添加到我的组件的class。

As you can see, the comments section is present, but it is hidden by the class FB_hide_iframes which i haven't put there.

这是在我的主页中添加该部分的代码 (home.js)

componentDidMount() { 
...
window.fbAsyncInit = function () {
        FB.init({
            appId: 'XXXXXXXXXXXXXX',
            xfbml: true,
            version: 'v2.6'
        });
    };
    (function (d, s, id) {
        console.log('test');
        const fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        const js = d.createElement(s); js.id = id;
        js.src = '//connect.facebook.net/fr_CA/sdk.js#xfbml=1&version=v2.6&appId=XXXXXXXX';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    FB.XFBML.parse(); 
...
}

并在我添加的渲染函数中：

render() {
<div id="fb-root"></div>
...
<div className="fb-comments"
                    data-href="MY-URL"
                    data-width="1000"
                    data-numposts="10"
                    data-order-by="reverse_time">
                </div>

有人知道吗？

编辑：评论部分正在显示，但是当我进入我网站的另一个部分并返回（单页应用程序）时，它消失了。这是我的组件的代码：

    import React, { Component, PropTypes } from 'react';
import { mediaQueries } from '../../decorators';

@mediaQueries
export default class FacebookComments extends Component {
    static propTypes = {
    mediaQueries: PropTypes.func.isRequired,
    appId: PropTypes.string.isRequired,
    version: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
};

state = {
    mobile: false,
}

componentDidMount() {
    this.props.mediaQueries('(max-width: 950px)', () => {
        this.setState({
            mobile: true,
        });
    });
    this.props.mediaQueries('(min-width: 951px)', () => {
        this.setState({
            mobile: false,
        });
    });

        FB.init({
            appId: 'XXXXXXXXXXXXXXXXX',
            xfbml: true,
            version: 'v2.6',
        });

    (function (d, s, id) {
        const fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        const js = d.createElement(s); js.id = id;
        js.src = '//connect.facebook.net/fr_CA/sdk.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

componentDidUpate() {
    FB.XFBML.parse();
}

render() {
    const componentWidth = this.state.mobile ? '95%' : '75%';

    return (
        <div style={{ width: componentWidth }}>
            <div id="fb-root"></div>
            <div className="fb-comments"
                data-href={this.props.url}
                data-width="100%"
                data-numposts="10"
                data-order-by="reverse_time">
            </div>
        </div>
    );
}
}

luschn 我不知道也不明白你在说什么。我在 fbAsyncInit 中放了一个 console.log 但它从未显示，这意味着它永远不会被调用。我上网查了一下，没有相关信息。网上的人只说：把它放在你的代码中，让魔法发生..... 这就是为什么我将它从我的代码中删除的原因。编辑 #2：我所有的 Facebook 社交插件都在这段代码中。

Answer 1

旁注：在 componentDidMount 中添加 JS SDK 初始化代码是个糟糕的主意。相反，将该代码添加到您的基础 HTML 或将其放在单独的 "init" 函数中，并确保在使用该组件之前加载它。

无论哪种方式，都只能在FB.init之后使用FB.XFBML.parse——即JS SDK加载初始化时：

FB.init({
    appId: 'XXXXXXXXXXXXXX',
    xfbml: true,
    version: 'v2.6'
});
FB.XFBML.parse();

您甚至应该在浏览器平台中看到警告或错误，表明您当前的代码未定义 FB。

您可能还需要在 componentDidUpdate 中再次调用 FB.XFBML.parse()。

话虽如此，这是我的想法：

componentDidMount() {
    window.fbAsyncInit = () => {
        FB.init({
            appId: 'xxx',
            xfbml: true,
            version: 'v2.6'
        });
        FB.XFBML.parse();
        console.log('make sure this happens');
    };

    (function(d, s, id){
        let 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'));
}
componentDidUpdate() {
    FB.XFBML.parse();
}

同样，您应该将 init/loading 内容放在别处，但这只是为了优化。检查您的浏览器控制台是否有错误，可能 componentDidUpdate 在 JS SDK 初始化之前被调用。在这种情况下，您可能需要检查 FB 是否可用：

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

或者，您可以使用状态变量（例如 "isSDKInitialized"）并在 FB.init:

之后将其设置为 true

componentDidUpdate() {
    if (this.state.isSDKInitialized) {
        FB.XFBML.parse();
    }
}

这是你需要的最小值，路由的问题是 componentDidUpdate 和 componentDidMount 都不会被调用。另外尝试使用 componentWillReceiveProps（与 componentDidUpdate 中相同的代码来刷新社交插件）。

查看这些链接以获取更多信息 - 假设您使用的是 react-router:

Answer 2

对于那些想知道如何纠正错误的人。你不能有：<script src="//connect.facebook.net/fr_CA/sdk.js"></script> 在你的 <head> 中，你必须在 <body> 的开头有 <div id="fb-root"></div> 并且在你的 FacebookComments 组件中有这个代码：

 componentDidMount() {
        this.props.mediaQueries('(max-width: 950px)', () => {
            this.setState({
                mobile: true
            });
        });
        this.props.mediaQueries('(min-width: 951px)', () => {
            this.setState({
                mobile: false
            });
        });

    window.fbAsyncInit = () => {
        FB.init({
            appId: this.props.appId,
            xfbml: true,
            version: this.props.version,
        });
        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'));
}

componentWillReceiveProps() {
    if (FB) {
        console.log('its in receiveProps');
        FB.XFBML.parse();
    }
}

componentDidUpate() {
    if (FB) {
        FB.XFBML.parse();
    }
}

虽然我的代码给我一个错误，但它不会阻止 webapp 加载评论部分。你可能会得到一个： Unhandled promise rejection ReferenceError: FB is not defined(…) 我试着用州的元素做一个旗帜，但它和以前的州不一样。

Facebook 社交插件评论部分被类名隐藏（ReactJS）

Facebook Social Plugins comments section hidden by classname (ReactJS)

facebook

facebook-javascript-sdk

facebook-social-plugins

reactjs