javascript - 无法读取 useRef、react.js 中未定义的属性“样式”

Question

我正在尝试制作一个跟随鼠标光标的圆圈。它工作正常，但是当我尝试在 React 中做同样的事情时，它表明样式没有被污染。当我第一次编写代码时，它工作正常，但是当我进行刷新时，它显示了前面提到的确切错误。

并且使用 querySelector 也不起作用！

 import React, { useRef } from "react";

const Ball = () => {
  const ball = useRef();
  //   const ball = ballRef.current;
  //   console.log(ball, "app");

  let distanceX;
  let distanceY;

  let mouseX = null;
  let mouseY = null;

  let ballX = 0;
  let ballY = 0;

  let speed = 0.05;

  function left() {
    ball.current.style.left = ballX + "px";
  }
  function top() {
    ball.current.style.top = ballY + "px";
  }

  const animate = () => {
    distanceX = mouseX - ballX;
    distanceY = mouseY - ballY;

    ballX = ballX + distanceX * speed;
    ballY = ballY + distanceY * speed;

    left();
    top();

    requestAnimationFrame(animate);
  };

  animate();

  document.addEventListener("mousemove", (e) => {
    mouseX = e.pageX;
    mouseY = e.pageY;
  });
  return <div className="ball" ref={ball}></div>;
};

export default Ball;

预期结果： 在此处输入图像描述

标签： javascriptreactjsdomvirtual-domuse-ref