可以使用event.pageX和event.pageY属性获取鼠标从页面开始的位置。

const Layout = ({children}) => {

  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  useLayoutEffect(() => {
    document.onmousemove = (event) => {
      var e = event;
      setX(e.pageX);
      setY(e.pageY);
    };
  });

  return (
    <div className={styles.layout}>
      <div style={{top: y - 14, left: x - 14}} className={styles.cursor} />;
      <Header />
      {children}
      <Footer />
    </div>
  )
}

这将解决您的问题，但它不会更新光标滚动。
我不确定你是否想使用useState来移动屏幕上的光标。你也可以使用ref来达到这个目的。另外，当组件卸载时（即使你从来没有卸载过布局组件），不要忘记清除事件侦听器。

const Layout = ({ children }) => {
  const cursorRef = useRef();

  useLayoutEffect(() => {
    const handleMouseMove = (event) => {
      if (cursorRef.current) {
        cursorRef.current.style.top = `${event.pageY}px`;
        cursorRef.current.style.left = `${event.pageX}px`;
      }
    };

    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  });

  return (
    <div className={styles.layout}>
      <div className="cursor" ref={cursorRef} />
      <Header />
      {children}
      <Footer />
    </div>
  )

行为主题是RxJS中的一种主题，RxJS是JavaScript中用于React式编程的库。行为主题允许您跟踪主题的当前值以及该值随时间的任何更改。要在服务函数中使用行为主题，请执行以下步骤：
从RxJS库中导入要使用的行为主体和可观察操作符，例如：

import { BehaviorSubject } from 'rxjs';
import { map, filter } from 'rxjs/operators';

在服务函数中新建一个行为主体，并初始化一个初始值，例如：

const subject = new BehaviorSubject(initialValue);

使用行为主题跟踪当前值以及对该值的任何更改。例如，可以使用.next（）方法更新主题的值，使用.getValue（）方法获取当前值。复制代码subject.next（newValue）; const currentValue = subject.getValue（）;将行为主题用作可观察对象以创建数据流，并使用可观察运算符将转换应用于这些流。例如：

const stream = subject.pipe(
  filter(value => value > 10),
  map(value => value * 2)
);

通过在服务函数中使用行为主题，您可以跟踪当前值以及对该值的任何更改，并使用这些值创建可在应用程序中转换和使用的数据流。

enter code here