Question

我遇到了facebook聊天组件的问题，我在componentDidMount中启动它，如果你在/ contact上进行硬刷新，它会加载组件但是如果我们浏览到/ home或/ about，它将不会渲染聊天组件然后回到联系页面。

组件代码：

componentDidMount() {
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'my-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

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

render() {
  return (
    <div
    className='fb-page'
    data-href='https://www.facebook.com/mypage/'
    data-tabs='messages'
    data-width='450'
    data-height='280'
    data-small-header='true'>
      <div className='fb-xfbml-parse-ignore'>
        <blockquote />
      </div>
    </div>

如果我的意思是，如果你努力刷新页面，你可以得到我想要的东西：https://ibb.co/gECpXm。

但是如果我浏览/ home然后回来我得到这个：https://ibb.co/bLDwCm

我正在使用React 16和React路由器4进行路由。

先谢谢

Facebook聊天组件无法加载，除非在页面React上进行硬刷新

0 个答案: