React项目添加react-beautiful-dnd的Droppable组件报错的解决

报错原因 #

1. Render回调未返回JSX元素：Droppable和Draggable的render箭头函数使用大括号{}但未显式返回JSX内容，导致组件接收到undefined，触发渲染错误。
2. Draggable ID重复：两个Draggable组件使用了相同的draggableId={0}，react-beautiful-dnd要求每个可拖拽元素必须拥有唯一ID。
3. 版本兼容性冲突：react-beautiful-dnd已停止维护，与React 18+版本存在兼容性问题，这也是触发报错的常见原因。

解决办法 #

1. 修复代码逻辑问题 #

调整箭头函数的返回方式，同时给Draggable设置唯一ID和正确的索引：

import React from 'react';
import './App.css';

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

function App() {
  return (
    <div className="App">
      <DragDropContext>
        <Droppable droppableId='thing'>
          {(provided) => (
            <div ref={provided.innerRef} {...provided.droppableProps} >
              <Draggable draggableId="item-1" index={0}>
                {(provided) => (
                  <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                    some
                  </div>
                )}
              </Draggable>
              <Draggable draggableId="item-2" index={1}>
                {(provided) => (
                  <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                    thing
                  </div>
                )}
              </Draggable>
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
}

export default App;

2. 处理版本兼容性 #

• 若使用React 18，建议替换为维护活跃的@dnd-kit/core作为拖拽方案，安装命令：

  npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
  

• 若坚持使用react-beautiful-dnd，需降级React到17版本：

  npm install react@17 react-dom@17
  

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