html.js 在页面加载 Gatsby 时仅加载一次脚本

Question

I am using html.js to load custom script.我正在使用 html.js 加载自定义脚本。 I have created a js file in static folder custom.js but when I am running my project it loads the script only once on first time page load but when I am navigation to other page it not loading the script.我在 static 文件夹custom.js中创建了一个 js 文件，但是当我运行我的项目时，它只在第一次页面加载时加载脚本，但是当我导航到其他页面时它不加载脚本。

My custom.js file我的custom.js文件

$(document).ready(function () {
    console.log("in ready");
});

My html.js file我的html.js文件

import React from "react";
import PropTypes from "prop-types";
import { withPrefix } from "gatsby";

export default function HTML(props) {
    return (
        <html {...props.htmlAttributes}>
            <head>
                <meta charSet="utf-8" />
                <meta httpEquiv="x-ua-compatible" content="ie=edge" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1, shrink-to-fit=no"
                />
                <script
                    type="text/javascript"
                    src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"
                ></script>
                <link
                    href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css"
                    rel="stylesheet"
                    type="text/css"
                />
                {props.headComponents}
            </head>
            <body {...props.bodyAttributes}>
                {props.preBodyComponents}
                <div
                    key={`body`}
                    id="___gatsby"
                    dangerouslySetInnerHTML={{ __html: props.body }}
                />
                {props.postBodyComponents}
                <link
                    rel="stylesheet"
                    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
                />
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
                <script
                    type="text/javascript"
                    src={withPrefix("js/custom.js")}
                ></script>
            </body>
        </html>
    );
}

HTML.propTypes = {
    htmlAttributes: PropTypes.object,
    headComponents: PropTypes.array,
    bodyAttributes: PropTypes.object,
    preBodyComponents: PropTypes.array,
    body: PropTypes.string,
    postBodyComponents: PropTypes.array,
};

What I am doing here wrong?我在这里做错了什么？ Why it's loading script only once?为什么它只加载一次脚本？ What I have to do load custom.js script on every page navigation?我必须在每个页面导航上加载custom.js脚本吗？

I have also tried to include custom.js inside my Layout file in <Helmet></Helmet> but same issue.我还尝试在<Helmet></Helmet>的布局文件中包含custom.js ，但同样的问题。

Thanks谢谢

Answer 1

What I am doing here wrong?我在这里做错了什么？ Why it's loading script only once?为什么它只加载一次脚本？ What I have to do load custom.js script on every page navigation?我必须在每个页面导航上加载 custom.js 脚本吗？

I think that there is a misunderstanding and a mix of context on how React and old-fashioned scripting like jQuery works.我认为对于 React 和像 jQuery 这样的老式脚本的工作方式存在误解和混合上下文。 In the end, Gatsby is a React-based application.最后，Gatsby 是一个基于 React 的应用程序。

Among saying that Reacts manipulates a virtual DOM (vDOM) and jQuery points directly to the DOM, which has an extremely high-cost impact on performance.其中说 Reacts 操作一个虚拟 DOM （vDOM），jQuery 直接指向 DOM，这对性能有极高的成本影响。 If you mix both approaches outside the scope of React, you can block React's hydration , potentially breaking your application.如果你在 React 的 scope 之外混合使用这两种方法，你可以阻止React 的 hydration ，可能会破坏你的应用程序。

You can simply create a useEffect hook with empty dependencies ( [] ), which will be triggered once the DOM tree is loaded for each page it's included.您可以简单地创建一个带有空依赖项 ( [] ) 的useEffect挂钩，一旦为包含的每个页面加载 DOM 树，就会触发该挂钩。 React's lifecycle should work for your use-case without overkilling the customization of the HTML generated by Gatsby. React 的生命周期应该适用于您的用例，而不会过度使用 Gatsby 生成的 HTML 的自定义。

Your custom.js file must have something exported.您的custom.js文件必须导出一些内容。 As simply as:就像：

const customJS =()=> console.log("I'm ready");

export default customJS;

Then, on any page:然后，在任何页面上：

import React, {useEffect} from "react";
import customJS from "../path/to/custom.js";

const AnyPage =(props)=>{

   useEffect(()=>{
     customJS()
   }, [])


return <div>Some content for AnyPage()<div>
}
export default AnyPage;

customJS() will be triggered only one time per page, once the DOM is loaded.加载 DOM 后，每页将仅触发一次customJS() 。

Please, don't use jQuery along with React, it's not needed.请不要将 jQuery 与 React 一起使用，这不是必需的。

html.js 在页面加载 Gatsby 时仅加载一次脚本

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-05-18 13:08:03

html.js 在页面加载 Gatsby 时仅加载一次脚本

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-05-18 13:08:03

解决方案1
1 已采纳 2021-05-18 13:08:03