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

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

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

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

下面是在我的主页（home.js）中添加该部分的代码

在渲染函数中，我添加了：

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>

render（）{
...

有人有主意吗

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

    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>
    );
}
}

 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();
    }
}

import React，{Component，PropTypes}来自'React'；
从“../../decorators”导入{mediaQueries}；
@媒体查询
导出默认类FacebookComments扩展组件{
静态类型={
mediaQueries:PropTypes.func.isRequired，
appId:PropTypes.string.isRequired，
版本：PropTypes.string.isRequired，
url:PropTypes.string.isRequired，
};
状态={
手机：错，
}
componentDidMount（）{
this.props.mediaQueries（‘（最大宽度：950px）’，（）=>{
这是我的国家({
手机：是的，
});
});
this.props.mediaQueries（‘（最小宽度：951px）’，（）=>{
这是我的国家({
手机：错，
});
});
FB.init({
appId:'XXXXXXXXXXXXXX'，
xfbml：是的，
版本：“v2.6”，
});
（功能（d、s、id）{
const fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
const js=d.createElement；js.id=id；
js.src='//connect.facebook.net/fr_CA/sdk.js'；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
}
成分双酯（）{
FB.XFBML.parse（）；
}
render（）{
const componentWidth=this.state.mobile？'95%：'75%'；
返回(
);
}
}

luschn我不知道也不明白你在说什么。我在fbAsyninit中放了一个console.log，但它从未显示，这意味着它从未被调用过。我在网上查看过，但没有相关信息。网上的人只会说：把它放在你的代码中，让魔法发生。。。。。 这就是为什么我从代码中删除了它。

---

编辑#2：Facebook社交插件的所有功能都在这段代码中。

旁注：在

componentDidMount

中添加JS SDK初始化代码是一个糟糕的主意。相反，请将该代码添加到基本HTML中，或者将其放在单独的“init”函数中，并确保在使用该组件之前已加载该代码

无论哪种方式，您都只能在

FB.init

之后使用

FB.XFBML.parse

——也就是说，在加载并初始化JSSDK时：

FB.init({
appId:'xxxxxxxxxxxx'，
xfbml：是的，
版本：“v2.6”
});
FB.XFBML.parse（）；

您甚至应该在OLE上的浏览器中出现警告或错误，即FB未使用当前代码定义

您可能还需要在

componentDidUpdate

中再次调用

FB.XFBML.parse（）

话虽如此，我的想法如下：

componentDidMount（）{
window.fbAsyninit=（）=>{
FB.init({
appId:'xxx'，
xfbml：是的，
版本：“v2.6”
});
FB.XFBML.parse（）；
log（“确保发生这种情况”）；
};
（功能（d、s、id）{
让js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src='//connect.facebook.net/en_US/sdk.js'；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
}
componentDidUpdate（）{
FB.XFBML.parse（）；
}

同样，你应该把初始化/加载的东西放在别处，但这只是为了优化。检查你的浏览器控制台是否有错误，可能在JS SDK初始化之前调用了

componentdiddupdate

。在这种情况下，你可能需要检查FB是否可用：

componentDidUpdate（）{
如果（FB）{
FB.XFBML.parse（）；
}
}

或者，您可以使用一个状态变量（“isSDKInitialized”），并在FB.init之后将其设置为true：

componentDidUpdate（）{
if（this.state.isSDKInitialized）{
FB.XFBML.parse（）；
}
}

这是您所需的最低要求，路由问题是

componentdiddupdate

和

componentDidMount

都不会被调用。另外，尝试

componentWillReceiveProps

（与

componentdiddupdate

中的代码相同，以刷新社交插件）。

查看这些链接了解更多信息-假设您正在使用

react路由器

：

---

对于那些想知道如何纠正错误的人。你不能有：

在您的

中，必须在

的开头有

，并且在FacebookComments组件中有此代码：

    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>
    );
}
}

 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();
    }
}

但是，此me代码给了我一个错误，但它不会阻止webapp加载评论部分。您可能会得到：

未处理的承诺拒绝引用错误：未定义FB（…）

---

我试图用状态元素创建一个标志，但它与以前的状态不同。

当我删除init周围的window.fbAsyninit=function（）{}时，它就起作用了！谢谢！componentDidMount中的JS SDK看起来还可以