React DnD拖拽问题求助：棋子复位且报Legacy Context API错误

核心原因 #

chessboardjsx的版本大概率和你当前使用的react-dnd版本不兼容——旧版chessboardjsx依赖react-dnd的Legacy Context API（也就是报错提示里的DragDropContext/DragSource/DropTarget类组件API），而新版react-dnd已经废弃了这套API，改用useDrag/useDrop hooks和DndProvider，直接混用会导致拖拽状态同步失效，最终棋子回到初始位置。

具体解决思路 #

1. 版本对齐（最简方案） #

先查chessboardjsx的官方文档或它的package.json，确认它兼容的react-dnd版本，然后降级你的react-dnd到对应版本：

• 比如chessboardjsx v2.4.7依赖react-dnd@^11.1.3和react-dnd-html5-backend@^11.1.3，执行安装命令：

  npm install react-dnd@11.1.3 react-dnd-html5-backend@11.1.3
  

• 安装完成后，用旧版的DragDropContext包裹根组件（适配chessboardjsx的要求）：

  import { DragDropContext } from 'react-dnd';
  import HTML5Backend from 'react-dnd-html5-backend';
  import Chessboard from 'chessboardjsx';
  
  const App = DragDropContext(HTML5Backend)(() => {
    return <Chessboard position="start" />;
  });
  

2. 升级组件API（适配新版react-dnd） #

如果不想降级react-dnd，需要改造chessboardjsx的核心组件，把Legacy API换成新版hooks：

• 替换DragSource为useDrag hook（棋子组件）：

  import { useDrag } from 'react-dnd';
  
  function ChessPiece({ piece, square, onMove }) {
    const [{ isDragging }, dragRef] = useDrag(() => ({
      type: 'CHESS_PIECE',
      item: { square, piece },
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      }),
      end: (item, monitor) => {
        const dropResult = monitor.getDropResult();
        if (dropResult && dropResult.square !== item.square) {
          onMove(item.square, dropResult.square);
        }
      },
    }));
  
    return (
      <div
        ref={dragRef}
        style={{ opacity: isDragging ? 0.6 : 1, cursor: 'grab' }}
      >
        {/* 渲染棋子内容 */}
      </div>
    );
  }
  

• 替换DropTarget为useDrop hook（棋盘格子组件）：

  import { useDrop } from 'react-dnd';
  
  function ChessSquare({ square, piece, onDrop }) {
    const [{ isOver }, dropRef] = useDrop(() => ({
      accept: 'CHESS_PIECE',
      drop: () => ({ square }),
      collect: (monitor) => ({
        isOver: monitor.isOver(),
      }),
    }));
  
    return (
      <div
        ref={dropRef}
        style={{ backgroundColor: isOver ? '#a0c8ff' : square === 'a1' || square === 'h8' ? '#769656' : '#eeeed2' }}
      >
        {piece && <ChessPiece piece={piece} square={square} onMove={onDrop} />}
      </div>
    );
  }
  

• 根组件用新版DndProvider包裹：

  import { DndProvider } from 'react-dnd';
  import { HTML5Backend } from 'react-dnd-html5-backend';
  import { useState } from 'react';
  import Chessboard from './your-custom-chessboard'; // 替换为你改造后的棋盘组件
  
  function App() {
    const [position, setPosition] = useState('start');
  
    const handleMove = (sourceSquare, targetSquare) => {
      const newPosition = { ...position };
      newPosition[targetSquare] = newPosition[sourceSquare];
      delete newPosition[sourceSquare];
      setPosition(newPosition);
    };
  
    return (
      <DndProvider backend={HTML5Backend}>
        <Chessboard position={position} onDrop={handleMove} />
      </DndProvider>
    );
  }
  

3. 检查状态同步逻辑 #

拖拽后棋子回位的本质是棋盘位置状态没有被正确更新：

• 必须在chessboardjsx的onDrop或onMove回调中，把棋子的移动同步到组件状态（比如上面代码中的handleMove函数）；
• 禁止直接修改原状态对象，必须通过展开运算符...创建新的状态副本，触发React重新渲染。

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