在 ReactJS 应用程序中实现 Facebook 评论插件答案

【问题标题】：Implementing Facebook comments plugin in ReactJS app在 ReactJS 应用程序中实现 Facebook 评论插件
【发布时间】：2016-01-07 11:00:30
【问题描述】：

我正在尝试在当前使用 React Router 的 ReactJS 应用程序中加载 facebook cmets 插件。

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

我需要做些什么才能让它一直出现吗？

我想我需要删除 facebook init 并重新初始化。但这感觉不对。

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

```

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

谢谢，约翰。

【问题讨论】：

标签： facebook reactjs react-router

【解决方案1】：

您只需要初始化 JavaScript SDK 一次，因为 componentDidMount 只会在它所在的位置被调用一次。尝试将FB.XFBML.parse() 放入componentDidUpdate：

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

我不确定这是否是最佳解决方案，但应该可以。

【讨论】：

太棒了。感谢您的帮助。

【解决方案2】：

您可以将FB.XFBML.parse() 放在componentDidUpdate() 中，但它仅在组件更新时有效，因为componentDidUpdate() 是更新生命周期方法。如果您导航到某个其他组件然后返回该组件，则此解决方案将不起作用。因为在这种情况下，componentDidMount() 再次调用但没有调用 componentDidUpdate。因此，最好将FB.XFBML.parse() 放在componentDidMount() 的顶部。

componentDidMount() {
  if(window.FB){
    FB.XFBML.parse();
  }
// all other code is same
}

【讨论】：