Javascript html.js仅在页面加载Gatsby时加载脚本一次_Javascript_Reactjs_React Hooks_Gatsby_Ghost Blog

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

javascript reactjs gatsby

Javascript html.js仅在页面加载Gatsby时加载脚本一次,javascript,reactjs,react-hooks,gatsby,ghost-blog,Javascript,Reactjs,React Hooks,Gatsby,Ghost Blog,我正在使用html.js加载自定义脚本。我已经在静态文件夹custom.js中创建了一个js文件，但是当我运行我的项目时，它只在第一次加载页面时加载脚本一次，但当我导航到其他页面时，它不会加载脚本我的custom.js文件 $(document).ready(function () { console.log("in ready"); }); import React from "react"; import PropTypes from &q

我正在使用html.js加载自定义脚本。我已经在静态文件夹

custom.js

中创建了一个js文件，但是当我运行我的项目时，它只在第一次加载页面时加载脚本一次，但当我导航到其他页面时，它不会加载脚本

我的

custom.js

文件

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

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

我的

html.js

文件

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

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

从“React”导入React；
从“道具类型”导入道具类型；
从“盖茨比”中导入{withPrefix}；
导出默认函数HTML（道具）{
返回(
{props.headComponents}
{props.preBodyComponents}
{props.postBodyComponents}
);
}
HTML.propTypes={
HtmlatAttributes:PropTypes.object，
headComponents:PropTypes.array，
bodyAttributes:PropTypes.object，
preBodyComponents:PropTypes.array，
正文：PropTypes.string，
postBodyComponents:PropTypes.array，
};

我做错了什么？为什么只加载一次脚本？在每个页面导航中加载

custom.js

脚本需要做什么

我还尝试在

中的布局文件中包含

custom.js

，但问题相同

谢谢

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

我认为在React和老式脚本（如jQuery）的工作原理上存在误解和上下文混合。最后，Gatsby是一个基于React的应用程序

其中一种说法是react操作a（vDOM），jQuery直接指向DOM，这对性能有极高的成本影响。如果在React范围之外混合使用这两种方法，则可能会阻塞，从而可能破坏应用程序

您只需创建一个具有空依赖项的钩子（

[]

），一旦为每个包含的页面加载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;

import React，{useffect}来自“React”；
从“./path/to/custom.js”导入customJS；
const AnyPage=（道具）=>{
useffect（（）=>{
customJS（）
}, [])
为AnyPage（）返回一些内容
}
导出默认任意页面；

加载DOM后，

customJS（）

每页只会触发一次

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

谢谢您的详细解释。在我的代码中实现了同样的功能&它正在工作。非常感谢。