Плагин FaceBook Comment не отображается правильно при использовании с React - PullRequest
Новая
       7

Плагин FaceBook Comment не отображается правильно при использовании с React

0 голосов
/ 01 июня 2018

Я пытаюсь интегрировать плагин комментариев FaceBook в проект React.Работает нормально, но когда я ухожу и возвращаюсь, раздел комментариев исчезает.Когда я обновляю страницу, она появляется снова, я пробовал это решение , но оно не работает.Вот мой код 

componentDidMount(){
window.fbAsyncInit = function() {
  window.FB.init({
    appId            : 'xxxxxxxxx',
    autoLogAppEvents : true,
    xfbml            : true,
    version          : 'v3.0'
  });
  window.FB.XFBML.parse();
};

(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 = "https://connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 }

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

Я также получаю эту ошибку в консоли, когда секция комментариев не отображается 

    1_DH1qU_x8k.js:57 ErrorUtils caught an error: "Blocked a frame 
    with origin "https://www.facebook.com" from accessing a cross...". 
    Subsequent errors won't be logged; see https://fburl.com/debugjs.

Когда я обновляю страницу, ошибка исчезает, и все работаеткак и ожидалось.

1 Ответ

0 голосов
/ 02 августа 2018

Вы добавили вызов к (функция (d, s, id) {} ​​(документ, "скрипт", "facebook-jssdk") * вне области действия componentDidMount (). Добавьте его внутрьфункция componentDidMount () и она должна работать.

Вот рабочий код 

componentDidMount() {
  window.fbAsyncInit = function() {
  window.FB.init({
    appId: "xxxxxxxxx",
    autoLogAppEvents : true,
    xfbml            : true,
    version          : 'v3.0'
   });
  };

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

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