Question

我使用Gatsby和软件包react-load-script。

我的想法是使用外部加载脚本加载民意调查。

当我加载页面时，脚本已加载并且可以正常工作。我看到我的民意调查。

但是当我使用<Link to="..." />更改页面时，脚本似乎总是在这里，但是没有触发。所以我看不到我的民意调查。

为什么？以及如何解决该问题？

<Script
      url="https://static.apester.com/js/sdk/latest/apester-sdk.js"
      onCreate={this.handleScriptCreate.bind(this)}
      onError={this.handleScriptError.bind(this)}
      onLoad={this.handleScriptLoad.bind(this)}
    /> 
    <div className="apester-media" data-media-id="5bfe9820478f42ff6380cbe8exxx" height="416"></div>

盖茨比信息

System:
    OS: macOS 10.14
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.12.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.24 => 2.0.43 
    gatsby-cli: ^2.4.5 => 2.4.5 
    gatsby-image: ^2.0.15 => 2.0.20 
    gatsby-plugin-lodash: ^3.0.1 => 3.0.2 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.8 
    gatsby-plugin-offline: ^2.0.6 => 2.0.13 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.1 
    gatsby-plugin-sharp: ^2.0.7 => 2.0.12 
    gatsby-plugin-sitemap: ^2.0.1 => 2.0.2 
    gatsby-plugin-styled-components: ^3.0.1 => 3.0.1 
    gatsby-source-prismic: ^2.0.0 => 2.1.0 
    gatsby-transformer-sharp: ^2.1.4 => 2.1.8 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

Answer 1

解决方案是使用gatsby-browser.js

在此文件中，我必须将脚本再次重新加载。

exports.onRouteUpdate = () => {
    if (window.APESTER) {
       window.APESTER.reload();
    } 
}

说明：更改路线时，我执行了此脚本。

Answer 2

使用我自己的（本地）脚本执行此操作的方法是什么？它位于静态文件夹中，但也只执行一次。我试过用 Helmet 加载它（它可以但不需要全局运行），但这对我也不起作用。它是通过 gatsby-ssr 加载的：

export const onRenderBody = ({ setPostBodyComponents }) => {
       setPostBodyComponents([
          <script
             src="/main.js"
          />
       ])
}

脚本本身是：

document.querySelectorAll(".entry").forEach((elem) => {
      elem.onmouseenter = function(){
          elem.previousSibling.classList.add("visible");
      };
      elem.onmouseleave = function(){
          elem.previousSibling.classList.remove("visible");
      };
 });

我已经尝试让它在 gatsby-browser 中工作，但也没有奏效。

import yourScript from '/static/main.js'
exports.onRouteUpdate = () => yourScript();

如果它包含在 <Helmet> 中（只有我的索引页，它应该被执行）它也只能在 RouteChange 之前工作。这里提到了一个解决方案，但它对我不起作用（无论如何看起来都是一个不合适的解决方案）：Proper way to include a .js file in gatsby which executes its code on all the pages

不幸的是，我不太熟悉 class … extends React.Component 和 componentDidMount 以及它们如何与 Gatsby 的（道具）配合使用。

这是代码应该始终运行的组件（首页）：

const Home = ({ data }) => {
  return (
    <>
      <SEO title="Porfolio" />
      {data.allDatoCmsProject.edges.map(({ node: project }) => (
        <Link to={`${project.slug}`}>
          <Article 
            titleText={project.title}
            heroImage={project.featuredphoto.gatsbyImageData}
          />
        </Link>
      ))}
    </>
  )
}

更改路线时重新渲染脚本

盖茨比信息

2 个答案: