TypeScript中DragEvent报错求助：不愿使用React.DragEvent旧写法

错误根源 #

你遇到的是React合成事件与原生DOM事件的类型不兼容问题：

• 代码里的DragEvent默认引用的是浏览器原生的DragEvent接口，但React的onDragOver、onDrop等事件回调接收的是React合成事件对象，它的类型结构和原生DragEvent存在差异，所以会出现类型不匹配的报错，提示缺少layerX、layerY等属性。

解决方案（无需显式使用React.DragEvent） #

方案1：使用React通用合成事件类型 #

直接用React.SyntheticEvent作为事件参数类型，它兼容所有React合成事件，包含preventDefault等通用方法：

import { SyntheticEvent } from 'react';

const handleDragOver = (e: SyntheticEvent) => {
  e.preventDefault();
};

const dragOver = (e: SyntheticEvent) => {
  e.preventDefault();
};

<tr onDragOver={dragOver} 
    onDrop={(e: SyntheticEvent) => handleDrop(e, item.id)}></tr>

方案2：让TypeScript自动推断类型 #

省略事件参数的类型声明，TS会根据React事件回调的上下文自动推断正确的合成事件类型：

const handleDragOver = (e) => {
  e.preventDefault();
};

const dragOver = (e) => {
  e.preventDefault();
};

<tr onDragOver={dragOver} 
    onDrop={(e) => handleDrop(e, item.id)}></tr>

方案3：获取原生DOM事件（如果需要原生属性） #

如果确实需要使用layerX、offsetX等原生DragEvent的属性，可以通过合成事件的nativeEvent属性获取原生事件对象：

const handleDragOver = (e) => {
  const nativeDragEvent = e.nativeEvent as DragEvent;
  console.log(nativeDragEvent.layerX);
  e.preventDefault();
};

额外检查 #

确保你的tsconfig.json中compilerOptions.lib包含dom，这样TS才能正确识别原生DOM类型：

{
  "compilerOptions": {
    "lib": ["dom", "es2020"] // 至少包含dom
  }
}

内容的提问来源于stack exchange，提问作者Silo