2016-01-07 11 views
7

Próbuję wczytać wtyczkę do Facebooka w aplikacji ReactJS, która aktualnie używa React Router.Implementacja wtyczki komentarzy do Facebooka w aplikacji ReactJS

Jeśli umieściłem kod inicjujący facebook wewnątrz metody componentDidMount() mojej strony, ładuje się pierwszy raz. Ale po przejściu na inną stronę, a następnie powrocie do niej ponownie, nie ładuje ona wtyczki w ogóle.

Czy jest coś, co muszę zrobić, aby wyglądało przez cały czas?

Myślę, że muszę usunąć init z Facebooka i ponownie zainicjować. Ale to nie jest w porządku.

Wszelkie sugestie? Poniżej jest kod mojego składnika

`` `

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

`

Dzięki, Jana.

Odpowiedz

6

Wystarczy raz zainicjować pakiet JavaScript SDK, a ponieważ componentDidMount zostanie wywołany tylko wtedy, gdy będzie dobrze. Spróbuj umieścić FB.XFBML.parse() w componentDidUpdate:

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

Nie jestem pewien, czy jest to najlepsze rozwiązanie, ale powinno działać.

+0

Awesome. Dzięki za pomoc. –

Powiązane problemy