使用VirtualizedList代替antd的List组件，这样就可以流畅地使用react-beautiful-dnd进行拖拽排序。

代码示例：

import React, { useState } from "react"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { VirtualizedList } from "react-virtualized";

const initialData = [ { id: "1", content: "Item 1" }, { id: "2", content: "Item 2" }, { id: "3", content: "Item 3" } ];

function Item({ id, content, index }) { return ( {(provided, snapshot) => (

function App() { const [data, setData] = useState(initialData);

const onDragEnd = (result) => { if (!result.destination) return;

const newData = Array.from(data);
const [removed] = newData.splice(result.source.index, 1);
newData.splice(result.destination.index, 0, removed);

setData(newData);

};

const rowRenderer = ({ key, index, style }) => { const { id, content } = data[index];

return (
  
);

};

return ( {(provided, snapshot) => ( {provided.placeholder} )} ); }

export default App;