Implementierung von Facebook-Kommentaren Plugin in ReactJS App

Question

Ich versuche, das Facebook-Kommentare-Plugin in einer ReactJS App zu laden, die derzeit React Router verwendet.

Wenn ich den Facebook-Init-Code in die Methode componentDidMount() meiner Seite einfüge, wird das erste Mal geladen. Aber nachdem ich zu einer anderen Seite gegangen bin und dann wieder zu ihr gegangen bin, lädt sie das Plugin überhaupt nicht.

Gibt es etwas, was ich tun muss, damit es die ganze Zeit erscheint?

Ich denke, ich muss die Facebook-Init entfernen und erneut initialisieren. Aber das fühlt sich nicht richtig an.

Irgendwelche Vorschläge? Unten ist mein Code meiner Komponente

`` `

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

` `

Danke, John.

Answer 1

Sie müssen das JavaScript SDK nur einmal initialisieren, und da componentDidMount nur aufgerufen wird, sobald es in Ordnung ist, wo es ist. Versuchen Sie FB.XFBML.parse() in componentDidUpdate setzen:

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

Ich bin nicht sicher, ob dies die beste Lösung ist, aber es sollte funktionieren.