在ReactJS应用中实现Facebook评论插件 [英] Implementing Facebook comments plugin in ReactJS app

问题描述

我正在尝试在当前正在使用React Router的ReactJS应用程序中加载Facebook评论插件.

I'm trying to load the facebook comments plugin in a ReactJS app that's currently using React Router.

如果我将facebook初始化代码放入页面的componentDidMount()方法中，则它将首次加载.但是在转到另一个页面然后再次返回它之后，它根本不会加载该插件.

If I put the facebook init code inside my page's componentDidMount() method, it loads the first time. But after going to another page and then going back to it again, it doesn't load the plugin at all.

我需要做些什么才能使其始终显示吗?

Is there something that I need to do to make it appear all the time?

我想我需要删除Facebook初始化并再次重新初始化.但这感觉不对.

I'm thinking I need to remove the facebook init and reinitialize again. But that doesn't feel right.

有什么建议吗?下面是我的组件代码

Any suggestions? Below is my code of my component

```

import React, { Component } from 'react';
import SlidingPanels from '../components/SlidingPanels';

export class Feedback extends Component {
    constructor() {
        super();
    }

    componentDidMount() {
        $(window).scrollTo(0, '0.5s');

        window.fbAsyncInit = function() {
            FB.init({
                appId      : '115517331888071',
                cookie     : true,  // enable cookies to allow the server to access the session
                xfbml      : true,  // parse social plugins on this page
                version    : 'v2.5' // use version 2.1
            });
        }.bind(this);

        // Load the SDK asynchronously
        (function(d, s, id) {
            var 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'));
    }

    render() {
        return (
            <div>
                <div className="fb-comments" data-href="https://www.facebook.com/cna.net.au/" data-numposts="10"></div>
            </div>
        );
    }
}

``

谢谢， 约翰.

推荐答案

您只需要初始化一次JavaScript SDK，并且由于componentDidMount仅在一次调用就可以了.尝试将 FB.XFBML.parse() 放入componentDidUpdate:

You only need to initialize the JavaScript SDK once, and since componentDidMount only gets called once it´s fine where it is. Try putting FB.XFBML.parse() in componentDidUpdate:

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

我不确定这是否是最好的解决方案，但它应该可以工作.

I am not sure if this is the best solution, but it should work.

这篇关于在ReactJS应用中实现Facebook评论插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！