Реализация комментариев Facebook плагин в приложении ReactJS

Question

Я пытаюсь загрузить плагин комментариев facebook в приложении ReactJS, которое в настоящее время использует React Router.

Если я поместил код инициализации 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> 
     ); 
    } 
} 

` `

Спасибо, Джон.

Answer 1

Вам нужно только инициализировать SDK JavaScript один раз, а так как componentDidMount только вызывается, как только он в порядке, где он есть. Попробуйте положить FB.XFBML.parse() в componentDidUpdate:

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

Я не уверен, что это лучшее решение, но оно должно работать.