Implementazione del plug-in di commenti di Facebook nell'app ReactJS

Question

Sto provando a caricare il plug-in di commenti di Facebook in un'app ReactJS che sta attualmente utilizzando React Router.

Se inserisco il codice di init di facebook nel metodo componentDidMount() della mia pagina, viene caricato la prima volta. Ma dopo aver visitato un'altra pagina e averlo ripreso, non carica affatto il plugin.

C'è qualcosa che devo fare per farlo apparire tutto il tempo?

Sto pensando che ho bisogno di rimuovere l'init di facebook e reinizializzare di nuovo. Ma non è giusto.

Qualche suggerimento? Qui di seguito è il mio codice della mia componente

`` `

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

` `

Grazie, John.

Answer 1

È necessario solo inizializzare l'SDK JavaScript una volta, e dal momento che componentDidMount viene chiamato solo quando va bene dov'è. Prova a mettere in FB.XFBML.parse()componentDidUpdate:

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

Non sono sicuro se questa è la soluzione migliore, ma dovrebbe funzionare.