React Beautiful DND报Draggable/Droppable id校验失败无法拖拽

你遇到的报错是prop名称大小写拼写错误导致的，React组件prop大小写敏感，react-beautiful-dnd要求的必填prop为小驼峰格式，你将末尾的字母d大写后组件无法识别到对应配置，才会抛出找不到ID的错误。

需要修改三处配置：

• 将<Draggable>的draggableID属性改为draggableId
• 将<Droppable>的droppableID属性改为droppableId
• 给<DragDropContext>添加必填的onDragEnd回调属性，暂时不需要处理逻辑可以先传空函数占位

修改后的核心代码片段参考：

// Draggable部分修改
<Draggable key={id} draggableId={id} index={index}>

// Droppable部分修改
<Droppable droppableId="characters">

// DragDropContext部分修改
<DragDropContext onDragEnd={() => {}}>

修改完成后即可实现基础的拖拽拾取功能。

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