我的 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>
</>
)
}
uj5u.com熱心網友回復：
如果您正在加載相互依賴的腳本，我建議您使用 Gatsby 提供的ScriptAPI，它公開了一個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或useRef在指向 DOM 元素時使用鉤子
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534751.html