我正在尝试在当前正在使用React Router的ReactJS应用程序中加载Facebook评论插件。
如果我将Facebook初始化代码放入页面的componentDidMount()方法中,则它将首次加载。但是在转到另一个页面然后再次返回它之后,它根本不会加载该插件。
我需要做些什么才能使其始终显示吗?
我在想我需要删除facebook初始化并再次重新初始化。但这感觉不对。
有什么建议?以下是我的组件代码
```
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> ); } }
``
谢谢,约翰。
您只需要初始化一次JavaScript SDK,并且只需要一次componentDidMount调用就可以了。尝试把FB.XFBML.parse()在componentDidUpdate:
componentDidMount
FB.XFBML.parse()
componentDidUpdate
componentDidUpdate() { FB.XFBML.parse(); }
我不确定这是否是最好的解决方案,但它应该可以工作。