Question

我正在使用盖茨比（Gatsby）建立一个带有嵌入Facebook的“特殊”页面的网站。除非我手动重新加载页面或直接转到“特别”页面（而不是从主页导航至“特别”），否则不会显示Facebook嵌入。

我使用React-Helmet在我的layout.js组件文件中有Facebook脚本：

export default ({ children }) => {
  return (
    <div id={layoutStyles.body}>
      <Helmet>
        // ...other tags
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v5.0"></script>
      </Helmet>
      <Navigation />
      <div id={layoutStyles.main}>{children}</div>
      <Footer />
    </div>
  )
}

在我的specials.js文件中，我拥有其余的嵌入代码：

// ...
render() {
    return (
      <Layout>
        <div id="fb-root"></div>
        <p>Scroll to see more specials.</p>
        <div id={styles.facebook} className="fb-page" data-href="https://www.facebook.com/LakesideMarcell/" data-tabs="timeline" data-width="500" data-height="" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/LakesideMarcell/" className="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/LakesideMarcell/">Lakeside Lumber &amp; Hardware LLC</a></blockquote>
        </div>
        <p>If you don't see specials here click the link above to see our specials on Facebook.</p>
      </Layout>
    )
  }
}
export default Specials

我尝试在代码中移动script标记，但是结果是相同的问题。我还尝试过使用带有状态的componentDidMount和一个名为window.location.reload（）的函数，但我无法将页面重新加载一次。

我在不使用Gatsby的网站版本中使用了相同的代码，但是我没有这个问题，因此一定与Gatsby有关。有没有一种方法可以解决此问题或在没有用户操作的情况下重新加载页面一次？

除非手动重新加载页面，否则嵌入式Facebook不会使用Gatsby显示

0 个答案: