未定义Gatsby jquery snick $

lf3rwulv 于 2022-11-22 发布在 jQuery

关注(0)|答案(1)|浏览(108)

我有一个问题与gatsby 5，它导入jquery和slick.js到它使用“ Helm ”没有刷新页面，脚本的工作，但只要我点击f5（清除该高速缓存），我突然得到一个错误，“$是未定义”或“jquery s未定义“我觉得这可能是一个错误，他们不会加载在正确的js顺序，但我可能是错的。你会帮助吗？

export function Head() {
  return (
    <>
      <title>Simtopia</title>
      <Helmet>
      <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
         <script
      src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
      integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
           <script
      src="/js/localJS.js"
    ></script>
 </Helmet>
    </>
  )
}

jquery

来源：https://stackoverflow.com/questions/74446301/gatsby-jquery-slick-is-not-defined

1条答案

按热度按时间

jtw3ybtb1#

如果要加载相互依赖的脚本，我建议使用Gatsby提供的Script API，它公开了一个onLoad回调：

import React, { useState } from "react";
import { Script } from "gatsby";

export function Head() {
  const [loaded, setLoaded] = useState(false);

  return (
    <>
      <Script
        src="https://code.jquery.com/jquery-3.6.0.min.js"
        onLoad={() => setLoaded(true)}
      />
      {loaded && (
        <Script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" />
      )}
      {loaded && (
        <Script src="/js/localJS.js" />
      )}
    </>
  );
}

注意：相应地调整顺序或条件 *

️

问题范围之外：不要在React应用中导入jQuery，否则你会破坏水合作用。真的，不要这样做。
React（如Gatsby）创建并操作虚拟DOM（vDOM），而jQuery直接操作真实的的DOM。两者都使用会导致不必要的（再）水化问题，因为当DOM中的某些内容发生变化时，React不会察觉，反之亦然。这会转化为多个问题，但最典型的一个问题是发现页面中未设计样式的部分，使用浏览器的箭头/历史前进/后退时出现未呈现的钩子等。
来自React文档：
React不知道在React外部对DOM所做的更改。它根据自己的内部表示来确定更新，如果相同的DOM节点被另一个库操作，React会变得混乱，无法恢复。
或者，使用基于React的方法，如Reack Slick或在指向DOM元素时使用useRef挂钩

赞(0）回复(0）举报 2022-11-22

我来回答

未定义Gatsby jquery snick $

1条答案

️

相关问题

热门标签

最新问答