如何解决MUI与react-grid-dnd版本冲突实现协同工作？

react-grid-dnd 适配可行性 #

• 该库自2020年起已停止官方维护，没有适配React17及以上版本的计划，不建议在生产环境硬改适配：
  • 硬改需要先fork源码，将其依赖的老旧版react-dnd、react-dnd-html5-backend升级到适配React17/18的版本，替换所有React17之后标记为不安全的废弃生命周期API
  • 还需要自行适配React17之后的事件系统变更，重写部分拖拽事件绑定逻辑，改完后需要自行承担后续所有bug修复、版本兼容工作，长期维护成本极高，就算勉强跑通，后续React小版本迭代、MUI升级都可能导致拖拽逻辑失效，得不偿失。

兼容React17+/MUI的成熟替代方案 #

以下方案都可以实现网格内可拖拽盒子的交互效果，和参考示例的交互完全对齐，且不存在依赖冲突：

• @dnd-kit 系列
  • 是目前React生态维护活跃度最高的拖拽库，原生兼容React17、18版本，和MUI没有任何依赖冲突，包体积比传统react-dnd方案小40%左右
  • 搭配网格扩展包即可快速实现网格排序、自由拖放、拖拽吸附、占位动画等效果，默认支持触屏设备，官方提供了现成的网格拖拽示例代码，可直接复用，不需要自己写复杂的碰撞检测、坐标计算逻辑
• @hello-pangea/dnd
  • 是已停更的react-beautiful-dnd的社区维护分叉版，完全兼容React17/18，API和原react-beautiful-dnd保持一致，迁移成本极低
  • 自带流畅的拖拽交互动画，对固定列数的网格排序场景适配非常好，和MUI的Box、Paper、Card等布局组件结合时不会出现样式冲突，只需要在外层包裹拖拽容器即可
• react-grid-layout
  • 如果你的需求偏向可自由调整位置、可缩放尺寸的仪表盘式网格卡片，这个库是更合适的选择，原生支持React17/18，自带响应式网格配置、拖拽、缩放能力，和MUI组件适配度很高，不需要额外拼装拖拽逻辑。

选型建议 #

如果要1:1还原参考示例的可拖拽盒子效果，优先选择@dnd-kit，它的默认网格碰撞检测策略就支持拖拽时自动吸附网格位置，安装后不会引入不符合MUI版本要求的旧版React依赖，接入成本最低。

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