在使用react@18时，需使用@beautyful-dnd v13.0.0及以上的版本才能正常工作，以下是修改后的代码示例：

//导入模块 import { DragDropContext, Droppable, Draggable } from 'beautiful-dnd';

//定义组件 function App() { const [items, setItems] = useState([ { id: '1', content: 'Item 1' }, { id: '2', content: 'Item 2' }, { id: '3', content: 'Item 3' }, ]);

//处理拖拽结束后的函数 const onDragEnd = (result) => { if (!result.destination) return;

const newItems = Array.from(items);
const [reorderedItem] = newItems.splice(result.source.index, 1);
newItems.splice(result.destination.index, 0, reorderedItem);

setItems(newItems);

};

//渲染组件 return ( {(provided, snapshot) => (

export default App;