【问题标题】：Gatsby jquery slick $ is not definedGatsby jquery slick $ 未定义
【发布时间】：2022-11-16 03:32:38
【问题描述】：

我对 gatsby 5 有疑问，它使用“头盔”将 jquery 和 slick.js 导入到它而不刷新页面，脚本可以工作，但是当我单击 f5（清除缓存）时，我突然收到一个错误“$未定义”或“jquery 未定义”我觉得它们不会以正确的 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>
    </>
  )
}

【问题讨论】：

标签： javascript jquery reactjs gatsby slick.js

【解决方案1】：

如果您正在加载相互依赖的脚本，我建议您使用 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 docs：

React 不知道在 React 之外对 DOM 所做的更改。它根据其自身的内部表示确定更新，如果相同的 DOM 节点由另一个库操作，React 获取迷茫，无从挽回。

或者，使用基于 React 的方法，例如 Reack Slick 或在指向 DOM 元素时使用 useRef 挂钩

【讨论】：