在ReactJS應用程序中實現Facebook註釋插件

我試圖在當前使用React路由器的ReactJS應用程序中加載Facebook註釋插件。在ReactJS應用程序中實現Facebook註釋插件

如果我在頁面的componentDidMount（）方法中放入了facebook init代碼，它會首次加載。但是在轉到另一個頁面然後又回到它之後，它根本沒有加載插件。

有什麼我需要做的，以使它始終顯示？

我在想我需要刪除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> 
     ); 
    } 
}

謝謝，約翰的代碼。

來源

2016-01-07 John Fu

您只需要初始化JavaScript SDK一次，並且因爲componentDidMount只有在很好的情況下才會被調用。嘗試把FB.XFBML.parse()在componentDidUpdate：

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

我不知道這是否是最好的解決辦法，但它應該工作。

來源

2016-01-07 11:23:22 luschn

太棒了。謝謝你的幫助。 –

在ReactJS應用程序中實現Facebook註釋插件

回答

相關問題