Javascript React头盔仅在索引页上加载脚本，而不在其他页上加载脚本_Javascript_Reactjs_Gatsby_React Helmet

Javascript React头盔仅在索引页上加载脚本，而不在其他页上加载脚本

javascript reactjs gatsby

Javascript React头盔仅在索引页上加载脚本，而不在其他页上加载脚本,javascript,reactjs,gatsby,react-helmet,Javascript,Reactjs,Gatsby,React Helmet,我正在使用Gatsby.js作为入门模板我有一个Layout.js import React from 'react' import { Helmet } from 'react-helmet' import Footer from '../components/Footer' import Navbar from '../components/Navbar' import useSiteMetadata from './SiteMetadata' import { withPrefix }

我正在使用Gatsby.js作为入门模板

我有一个Layout.js

import React from 'react'
import { Helmet } from 'react-helmet'
import Footer from '../components/Footer'
import Navbar from '../components/Navbar'
import useSiteMetadata from './SiteMetadata'
import { withPrefix } from 'gatsby'
import './all.sass'
import './styles/blogs.sass'

const TemplateWrapper = ({ children }) => {
  const { title, description } = useSiteMetadata()
  return (
    <div>
      <Helmet>
        <html lang="en" />
        <title>{title}</title>
        <meta name="description" content={description} />

        <link
          rel="icon"
          sizes="180x180"
          href={`${withPrefix('/')}img/wf-logo.png`}
        />
        <link
          rel="icon"
          type="image/png"
          href={`${withPrefix('/')}img/wf-logo-32.png`}
          sizes="32x32"
        />
        <link
          rel="icon"
          type="image/png"
          href={`${withPrefix('/')}img/wf-logo-16.png`}
          sizes="16x16"
        />

        <link
          rel="mask-icon"
          href={`${withPrefix('/')}img/safari-pinned-tab.svg`}
          color="#0288d1"
        />
        <meta name="theme-color" content="#fff" />

        <meta property="og:type" content="business.business" />
        <meta property="og:title" content={title} />
        <meta property="og:url" content="/" />
        <meta
          property="og:image"
          content={`${withPrefix('/')}img/3d-desktop-backgrounds.jpg`}
        />
        <script src="../helpers.js" type="text/javascript" />
      </Helmet>
      <Navbar />
      <div>{children}</div>
      <Footer />
    </div>
  )
}

export default TemplateWrapper

它确实加载了helpers.js，但我的博客页面现在如下所示：

发生这种情况是因为

@reach/router

（反应路由）。它仅加载每个页面/组件更改的组件。由于所有页面都共享您的

，因此它只刷新

子组件中的内容，因为
组件本身没有任何变化，只有它们自己的子组件道具

一种可能有效的方法是将自定义组件与
一起使用，并将其加载到InExpage
和BlogPost
中。比如：
const BlogPost = ({ data }) => {
  const { markdownRemark: post } = data;

  return (
    <Layout>
      <Helmet titleTemplate="%s | Blog">
        <title>{`${post.frontmatter.title}`}</title>
        <meta
          name="description"
          content={`${post.frontmatter.description}`}
        />
        <script src="../helpers.js" type="text/javascript" />
      </Helmet>

      <BlogPostTemplate
        content={post.html}
        contentComponent={HTMLContent}
        description={post.frontmatter.description}
        tags={post.frontmatter.tags}
        title={post.frontmatter.title}
        from={'blog'}
      />
    </Layout>
  );
};

const IndexPage = ({ data }) => {
  const { frontmatter } = data.markdownRemark

  return (
    <Layout>
          <Helmet>
            <script src="../helpers.js" type="text/javascript" />
          </Helmet>
      <IndexPageTemplate
        image={frontmatter.image}
        title={frontmatter.title}
        subheading={frontmatter.subheading}
        mainpitch={frontmatter.mainpitch}
        intro={frontmatter.intro}
      />
    </Layout>
  )
}

从文件中：
onclientry
功能
（\uuuU2:emptyArg，pluginOptions:pluginOptions）=>未定义

在盖茨比浏览器运行时首次启动时调用
我通过使用钩子导入JavaScripts解决了这个问题
我还得出了关于何时在静态文件夹下导入脚本以及何时不导入脚本的结论
在我的场景中，html组件不是来自Reactjs组件，例如About.component.js，而是从Netlify CMS提供的博客编辑器中动态创建这些html元素
提示如下：当从编辑器（例如Netlify CMS的Markdown/Rich编辑器）创建html元素时，我必须按原样导入Javascripts（因为否则javascript函数将被丑化，从而导致不同的名称，那么您不能从Netlify CMS Rich编辑器中创建的html元素引用它）脚本文件需要放在static
文件夹下。否则，您可以按常规方式进行操作，例如在Reactjs组件中定义您的方法，并将其作为属性传入，然后在内部使用
以下是ImportScript钩子的外观：
import { useEffect } from 'react';
const ImportMyScript = resourceUrl=> {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = resourceUrl;
    script.async = true;
    document.body.appendChild(script);
return () => {
      document.body.removeChild(script);
    }
  }, [resourceUrl]);
};
export default ImportMyScript;

以下是如何使用它：
const BlogPost = ({ data }) => {
  const { markdownRemark: post } = data;
  ImportMyScript("../../bloghelpers.js");
  return (
  ............
  );
}

这对我的场景很有意义，因为我只想在About页面上导入AboutPers.js，在blog页面上导入bloghelpers.js。
hi Ferran，在我将头盔从BlogPostTemplate内部移动到Layout和BlogPostTemplate之间后，我的整个博客页面都消失了。查看我的更新。另外，onclientry
也不行，因为我已经试过了，文档中说：是在盖茨比浏览器运行时第一次启动时调用的。
因此它只运行一次，而不是在每次页面刷新时都运行。其想法是移动
，以及在博客模板中和InExpage
并将其从
中删除，因为它是多余的。你能调试一下“消失”是什么意思吗？此外，onclientry
方法在通过路由调用页面（
或导航
）时不起作用，但如果通过URL或F5或初始呈现刷新，则会加载函数，这就是为什么我说我不知道它是否符合您的要求，但我们称之为“页面刷新”是在onclientry方法的行为中。
谢谢Ferran，我想把布局作为一个整体布局，而不是重复向每个不同的组件添加布局，例如关于页面组件。我已经解决了这个问题，请看我的答案onclientry（）
在我通过直接访问博客url（例如https://myblog.com/blogs/howtohike。根据你的解释，在我的案例中使用它对我来说也是有意义的。我只是为了解决问题而疲惫不堪。所以现在，我将使用我的解决方案。下次，如果同样的问题出现，我会试试你的。干杯
import { helpers } from './your/path/to/helpers.js';
import React from 'react';

export const onClientEntry = () => helpers();

import { useEffect } from 'react';
const ImportMyScript = resourceUrl=> {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = resourceUrl;
    script.async = true;
    document.body.appendChild(script);
return () => {
      document.body.removeChild(script);
    }
  }, [resourceUrl]);
};
export default ImportMyScript;

const BlogPost = ({ data }) => {
  const { markdownRemark: post } = data;
  ImportMyScript("../../bloghelpers.js");
  return (
  ............
  );
}