Question

我正在使用ReactJS（由Facebook开发），我目前在显示来自Facebook社交插件的评论部分时出现问题......有点讽刺但是嘿，他们没有做出反应的插件。

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

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

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

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

无论哪种方式，您只能在componentDidMount之后使用FB.XFBML.parse - 也就是说，在加载和初始化JS SDK时：

FB.init

您甚至应该在浏览器鞋垫上发出警告或错误，FB未使用您当前的代码定义。

您可能还需要在FB.init({ appId: 'XXXXXXXXXXXXXX', xfbml: true, version: 'v2.6' }); FB.XFBML.parse();中再次致电FB.XFBML.parse()。

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

componentDidUpdate

同样，你应该将init / loading内容放在别处，但这只是为了优化。检查浏览器控制台是否有错误，可能在初始化JS SDK之前调用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(); }。在这种情况下，您可能需要检查FB是否可用：

componentDidUpdate

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

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

这是您所需要的最低限度，路由问题是componentDidUpdate() { if (this.state.isSDKInitialized) { FB.XFBML.parse(); } }和componentDidUpdate都不会被调用。另外尝试使用componentDidMount（与componentWillReceiveProps中的代码相同，以刷新社交插件）。

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

Answer 2

对于那些想知道如何纠正错误的人。你不能拥有：<script src="//connect.facebook.net/fr_CA/sdk.js"></script> 在<head>中，您必须在<div id="fb-root"></div>的开头<body>以及您的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社交插件注释部分由classname隐藏（ReactJS）

2 个答案: