如何在盖茨比中迁移jQuery函数和事件?

Question

我目前正在将一个老旧但仍然很漂亮的网站迁移到Gatsby PWA。

这个老网站完全是用HTML和jQuery构建的，它有很多漂亮的jQuery动画。

技术上，我通过自定义html.js成功导入了一些外部脚本，包括jQuery(v3.3.7)和Bootstrap(3.3.1)。

我还更新了一些属性名称，如class到className,style-字符串到对象等

我认为有点困难的是在旧的HTML文件中使用像onmouseover这样的事件的jQuery函数。

例如,

...
<div className="section">
<div className="block_information" id="block_information">
<div className="row first_row">
<div className="col-md-2 col-xs-12 icon_block_information top">
<div className="svg_text" onmouseover="runSmile()">
~~~~~~~~~~~~~~~~~~~~~~~~
<svg viewBox="0 0 80.25 80.25">
...
<g id="icon_smile_1">
<path
id="icon_smile"
className="cls-2"
...

runSmile函数是这样的，

function runSmile() {
window.ks = (function () {
function z(a) {
return "undefined" !== typeof a;
}
function v(a, b) {
return a && 0 == a.indexOf(b);
}
function N(a) {
if (!isFinite(a)) throw "non-finite value";
}
function O(a) {
if (14 >= a) return 16;
(a = X[a]) || (a = 0);
return a;
}
function D(a) {
return 0 <= a ? Math.pow(a, 1 / 3) : -Math.pow(-a, 1 / 3);
}
...
document.ks = ks;
(function (ks) {
ks.animate(
"#icon_smile",
[{ p: 6, t: [0, 1000], v: [0, 360], e: [[0], [0]] }],
{
autoplay:
document.location.search
.substr(1)
.split("&")
.indexOf("autoplay=true") < 0,
},
);
})(ks);
}

在这种情况下，我可以使用jQuery函数只有小的更新，也不更新事件属性，如onmouseover到onFocus?

如果我必须更新jQuery函数和事件属性，我应该怎么做?

提前感谢。

Answer 1

onmouseover应替换为onMouseOver或onMouseEnter/onMouseLeave。

然而，我不鼓励你将jQuery和Bootstrap导入到React项目中(真的，不要这样做)。

jQuery和Bootstrap直接指向和操作真实的DOM，而React创建和操作虚拟DOM (vDOM)。正因为如此，React永远不会意识到jQuery对DOM所做的改变，反之亦然，这转化为水合问题。实际上，这意味着您的组件(或它们的一部分)可能不会在您想要的时候或在您的不同用例中呈现，特别是当您在页面中执行某种导航时，失去了对代码流的控制。

另外，由于工作方式的不同(DOM vs . vDOM)，应用到React环境中的jQuery函数将永远不会被卸载。这可能听起来毫无意义，但你的资源会不断积累，最终你的网站会变得非常慢，特别是对于超过X秒的用户。

两者(jQuery和React)有不同的用途，你不应该把它们混在一起，这会给你带来巨大的警告和头痛。

此外，由于SSR (S)，盖茨比中的window需要特殊处理(像任何其他全局对象一样，像document)。erv——Side——R这里没有window，因为它还没有定义。根据您的触发器和用例，您可能需要将其封装在:

if(typeof window !== 'undefined'){
// your window stuff
}

如果你仍然在React环境中使用jQuery，你可以遵循:https://reactjs.org/docs/integrating-with-other-libraries.html

为卸载所有jQuery函数提供了一些有用的提示。

关于Bootstrap，我建议使用基于react的版本来避免我之前解释过的相同的水合问题。