Javascript 什么'；我从jquery重写react是错误的

我试图重写这个液体按钮，它使用jquery

我想为我的react组件重写它，但不知道出了什么问题：

以下是组件代码：

从“React”导入React；
从“下一个/链接”导入链接；
从“react”导入{useRef}；
从“react”导入{useffect}；
从“react”导入{useState}；
常量getPixelRatio=上下文=>{
var backingStore=
context.backingStorePixelRatio||
context.webkitBackingStorePixelRatio||
context.mozBackingStorePixelRatio||
context.msBackingStorePixelRatio||
context.obackStorePixelRatio||
context.backingStorePixelRatio||
1.
返回（window.devicePixelRatio | | 1）/backingStore；
};
常量useMove=（）=>{
设ref=useRef（）；
/*设msx=0；
设msy=0；
设mlx=0；
设mly=0*/
/*函数mouseSpeed（）{
msx=state.x-state.mouseLastXX；
msy=state.y-state.mouseLastYY；
mlx=state.x；
mly=state.y；
设置超时（鼠标速度，50）；
} */
const[state，setState]=useState（{x:0，y:0，mouseDirectionXX:0，mouseDirectionYY:0，mouseSpeedXX:0，mouseSpeedYY:0，mouseLastXX:0，mouseLastYY:0}）
常量handleMouseMove=e=>{
//e、 坚持
设xx=state.mouseDirectionX；
设yy=state.mouseDirectionY；
//mouseSpeed（）；
如果（state.xe.clientX）
xx=-1；
其他的
xx=0；
if（state.ye.clientY）
yy=-1；
其他的
yy=0；
//rx=（state.x-offset.left）；
//ry=（state.y-offset.top）；
setState（state=>（{…state，x:e.clientX，y:e.clientY，mouseDirectionXX:xx，mouseDirectionYY:yy}））
//mouseX=e.clientX；
//穆西=e.clientY；
//relMouseX=（mouseX-canvas.offsetLeft）；
//relMouseY=（mouseY-canvas.offsetTop）；
//控制台日志（xx+“//”+yy）；
}
useffect（（）=>{
window.addEventListener（“mousemove”，handleMouseMove）；
return（）=>window.removeEventListener（“mousemove”，handleMouseMove）；
}, []);
返回{
mouseX:state.x，
穆西：州，州，
mouseDirectionX:state.mouseDirectionXX，
mouseDirectionY:state.mouseDirectionYY，
mouseLastX:state.mouseLastX，
mouseLastY:state.mouseLastY，
mouseSpeedX:state.mouseSpeedXX，
mouseSpeedY:state.mouseSpeedYY，
//relMouseX:state.relMouseXX，
//雷穆西：州。雷穆西，
把手移动，
}
}
恒流按钮=（）=>{
const{mouseX，mouseY，mouseDirectionX，mouseDirectionY，handleMouseMove}=useMove（）；
设ref=useRef（）；
让按钮宽度=240；
钮扣高度=60；
设点数=8；
设pointsA=[]，pointsB=[]；
让粘度=10，鼠标指针=70，阻尼=0.05，显示指示器=假；
设relMouseX=0；
设relMouseY=0；
//让canvas=ref.current；
/*函数mouseSpeed（）{
mouseSpeedX=mouseX-mouseLastX；
mouseSpeedY=mouseY-鼠标弹性；
mouseLastX=mouseX；
鼠标弹性=鼠标；
设置超时（鼠标速度，50）；
//控制台日志（“赞成”）；
}
mouseSpeed（）*/
useffect（（）=>{
让canvas=ref.current；
让context=canvas.getContext（'2d'）；
让canvaspos=canvas.getBoundingClientRect（）；
设偏移量={
顶部：canvaspos.top，
左：画布位置左，
};
设mouseLastX=0；
让鼠标弹性=0；
//mouseDirectionX=0，
//鼠标方向Y=0，
让mouseSpeedX=0；
让mouseSpeedY=0；
relMouseX=（mouseX-offset.left）；
relMouseY=（mouseY-offset.top）；
mouseSpeedX=mouseX-mouseLastX；
mouseSpeedY=mouseY-鼠标弹性；
mouseLastX=mouseX；
鼠标弹性=鼠标；
//新的
log（“mouseX:+mouseX”）
console.log（“mouseLastX:+mouseLastX”）；
log（“mouseSpeedX:+mouseSpeedX”）；
log（“relMouseX:+relMouseX”）
log（“mouseDirectionX:+mouseDirectionX”）；
log（“mouseY:+mouseY”）
console.log（“mouseLastY:+mouseLastY”）；
log（“mousespedy:+mousespedy”）；
log（“relMouseY:+relMouseY”）
log（“mouseDirectionY:+mouseDirectionY”）；
功能点（x、y、标高）{
这个.x=这个.ix=75+x；
this.y=this.iy=75+y；
该值为0.vx=0；
这是0.vy=0；
这是cx1=0；
这1.cy1=0；
这是cx2=0；
这是0.cy2=0；
这个水平=水平；
}
Point.prototype.move=函数（）{
this.vx+=（this.ix-this.x）/（粘度*这个水平）；
this.vy+=（this.iy-this.y）/（粘度*这个水平）；
var dx=this.ix-relMouseX，
dy=this.iy-relMouseY；
var relDist=（1-Math.sqrt（（dx*dx）+（dy*dy））/mouseDist）；
//移动x
if（（mouseDirectionX>0&&relMouseX>this.x）| |（mouseDirectionX<0&&relMouseX0&&relDist<1）{
this.vx=（mouseSpeedX/4）*relDist；
}
}
该值为0.vx*=（1-阻尼）；
this.x+=this.vx；
//移动y
if（（mouseDirectionY>0&&relMouseY>this.y）| |（mouseDirectionY<0&&relMouseY0&&relDist<1）{
this.vy=（mouseSpeedY/4）*relDist；
}
}