ReactJSアプリでFacebookのコメントプラグインを実装する

Question

現在、React Routerを使用しているReactJSアプリでFacebookのコメントプラグインを読み込もうとしています。

私のページのcomponentDidMount（）メソッドの中にfacebookのinitコードを置くと、最初に読み込まれます。しかし、別のページに行ってから、もう一度そのページに戻ると、プラグインはまったく読み込まれません。

常に表示させるために何か必要なことはありますか？

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

` `

おかげで、 ジョンの私のコードです。

Answer 1

JavaScript SDKを一度初期化する必要があります。componentDidMountは、一度正しく呼び出された後に初めて呼び出されます。

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

私はこれが最善の解決策であるかどうかわからないのですが、それが動作するはず：componentDidUpdateでFB.XFBML.parse()を入れてみてください。