TypeError: Cannot read properties of null (reading 'offsetLeft')

这个错误是由于在获取 `modalRef.current` 的 `offsetLeft` 属性时，`modalRef.current` 的值为 `null` 引起的。这通常是因为在组件渲染之初获取 `modalRef.current` 时，可能还未完成 Modal 的挂载。

为了解决这个问题，可以使用 `useEffect` 钩子来确保在获取 `modalRef.current` 时 Modal 已经挂载。修改代码如下：

import { Modal } from 'antd';
import { useState, useRef, useEffect } from 'react';

const DraggableModal = ({
  visible,
  title,
  onCancel,
  children,
}) => {
  const [dragging, setDragging] = useState(false);
  const modalRef = useRef();

  useEffect(() => {
    if (modalRef.current) {
      modalRef.current.style.left = '100px';
      modalRef.current.style.top = '100px';
    }
  }, []);

  const handleMouseDown = (e) => {
    e.stopPropagation();
    setDragging(true);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (e) => {
    if (!dragging) return;
    const modalDOM = modalRef.current;
    modalDOM.style.left = `${modalDOM.offsetLeft + e.movementX}px`;
    modalDOM.style.top = `${modalDOM.offsetTop + e.movementY}px`;
  };

  const handleMouseUp = () => {
    setDragging(false);
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  return (
    <Modal
      visible={visible}
      title={title}
      onCancel={onCancel}
      mask={false}
      ref={modalRef}
      footer={null}
    >
      <div
        onMouseDown={handleMouseDown}
        style={{ cursor: 'move' }}
      >
        {children}
      </div>
    </Modal>
  );
};

export default DraggableModal;

在上述代码中，我们使用 `useEffect` 钩子来在组件挂载后初始化 Modal 的位置。在 `useEffect` 的回调函数中，我们检查 `modalRef.current` 是否存在，如果存在则设置初始位置为 `left: '100px'` 和 `top: '100px'`。

这样就可以确保在获取 `modalRef.current` 的属性之前，Modal 已经成功挂载，避免了 `TypeError: Cannot read properties of null` 错误。