与Ant设计表集成以及React漂亮的拖放问题

如何解决与Ant设计表集成以及React漂亮的拖放问题

甚至在我开始描述问题之前，如果任何人都有一个共享的链接来进行蚂蚁设计表集成并做出漂亮的拖放操作，请与我分享。

我正在尝试建立一个可以拖动行的表。我选择了蚂蚁设计表-https：//ant.design/components/table/

我尝试将可响应的拖放操作与蚂蚁表集成在一起，由于某种原因它不起作用。当我尝试拖动一行时，没有看到移动的动画，但是onDragEnd函数将目标显示为null，而定义了带有索引的拖动的移动源。 注意-我没有任何控制台警告或错误。 这是我的高级代码-> https://codesandbox.io/s/bold-morse-5pitd?file=/src/App.js

export default function ListView({ list = [] }) {

    const DragableBodyRow = (props) => {
        const index = list.findIndex((row) => row.id == props["data-row-key"]);

        return (
            <Draggable
                key={props["data-row-key"]}
                draggableId={props["data-row-key"]}
                index={index}
            >
                {(provided) => {
                    return (
                        <tr
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            {...props}
                        />
                    );
                }}
            </Draggable>
        );
    };

    const onDragEnd = (result) => {
        console.log("result",result);
        // I'm not setting the dragged state yet but atleast I should see the moving animation.
    };
    const droppableWrapper = (props) => {
        return (
            <DragDropContext onDragEnd={onDragEnd}>
                <Droppable droppableId="droppable">
                    {(provided,snapshot) => {
                        return (
                            <>
                                <tbody
                                    {...props}
                                    ref={provided.innerRef}
                                    {...provided.droppableProps}
                                >
                                    {props.children}
                                    {provided.placeholder}
                                </tbody>
                            </>
                        );
                    }}
                </Droppable>
            </DragDropContext>
        );
    };

    const components = {
        body: {
            wrapper: droppableWrapper,row: DragableBodyRow,},};
    return (
        <Table
            columns={listColumns}
            dataSource={list}
            components={components}
        />
    );
}