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

Question

我正在使用 html.js 加载自定义脚本。我在静态文件夹 custom.js 中创建了一个 js 文件，但是当我在运行我的项目时，它只在第一次页面加载时加载脚本一次，但是当我导航到其他页面时，它没有加载脚本。

我的custom.js文件

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

我的 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,
};

我在这里做错了什么？为什么它只加载一次脚本？我必须在每个页面导航上加载 custom.js 脚本？

我也曾尝试在 <Helmet></Helmet> 中的布局文件中包含 custom.js 但同样的问题。

谢谢

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?

我认为对于 React 和 jQuery 等老式脚本的工作方式存在误解和混杂。最后，Gatsby 是一个基于 React 的应用程序。

据说 Reacts 操纵 virtual DOM (vDOM) and jQuery points directly to the DOM, which has an extremely high-cost impact on performance. If you mix both approaches outside the scope of React, you can block React's hydration，可能会破坏您的应用程序。

您可以简单地创建一个具有空依赖项 ([]) 的 useEffect 挂钩，一旦为它包含的每个页面加载 DOM 树，它就会被触发。 React 的生命周期应该适用于您的用例，而不会过度定制由 Gatsby 生成的 HTML。

您的 custom.js 文件必须导出了一些内容。就像：

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

export default customJS;

然后，在任何页面上：

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;

一旦加载 DOM，

customJS() 每页只会触发一次。

请不要将 jQuery 与 React 一起使用，不需要。

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

html.js loading the script only once on page load Gatsby

javascript

reactjs

react-hooks

gatsby

ghost-blog