React组件导出时如何正确使用@DragDropContext装饰器？报错排查

看起来你遇到的这个错误，核心原因是传给DragDropContext的后端不符合要求，再结合你提到的装饰器配置问题，咱们一步步排查：

1. 先确认DragDropContext的基本用法是否正确 #

这个错误最常见的场景是，你没有给@DragDropContext传入正确的后端函数。React-DnD需要依赖一个后端（比如HTML5Backend）来处理拖拽逻辑，正确的装饰器用法应该是这样的：

import React from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

// 必须把HTML5Backend作为参数传给装饰器
@DragDropContext(HTML5Backend)
class YourComponent extends React.Component {
  // 组件逻辑...
}

export default YourComponent;

如果你只是写了@DragDropContext而没传后端参数，或者后端导入错误（比如路径写错、版本不兼容），就会触发这个错误。

2. 检查Babel装饰器的配置是否正确 #

装饰器属于实验性语法，Babel需要正确的插件才能解析。针对不同的Babel版本，配置略有不同：

如果你用的是Babel 7+ #

首先确保安装了必要的开发依赖：

npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/preset-react @babel/preset-env

然后在你的.babelrc文件里，要把装饰器插件放在类属性插件前面，并且开启legacy模式（React生态的装饰器大多用这个模式）：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

如果你用的是Create React App #

CRA默认不支持装饰器语法，你有两个选择：

• 用craco或react-app-rewired来修改Babel配置，添加装饰器插件
• 执行npm run eject暴露配置后，修改babel.config.js里的插件配置

3. 检查依赖版本是否匹配 #

确保react-dnd和react-dnd-html5-backend的版本是一致的，版本不兼容可能导致后端的导出方式变化（比如从默认导出变成命名导出）。你可以在package.json里查看这两个包的版本，比如：

{
  "dependencies": {
    "react-dnd": "^14.0.5",
    "react-dnd-html5-backend": "^14.0.5"
  }
}

如果版本不一致，重新安装匹配的版本即可。

4. 其他排查点 #

• 检查是否有其他Babel插件和装饰器插件冲突，比如某些语法转换插件可能会干扰装饰器的解析
• 如果你用了TypeScript，需要在tsconfig.json里开启experimentalDecorators: true配置

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