如何在Ant设计列表中使用react-beautiful dnd？

npm install react-beautiful-dnd antd

yarn add react-beautiful-dnd antd

import React from 'react';
import { List } from 'antd';

const data = ['Item 1', 'Item 2', 'Item 3'];

const MyList = () => {
  return (
    <List
      bordered
      dataSource={data}
      renderItem={item => (
        <List.Item>
          {item}
        </List.Item>
      )}
    />
  );
};

export default MyList;

import React, { useState } from 'react';
import { List } from 'antd';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const initialData = ['Item 1', 'Item 2', 'Item 3'];

const MyDraggableList = () => {
  const [items, setItems] = useState(initialData);

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

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

    setItems(newItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided, snapshot) => (
          <List
            {...provided.droppableProps}
            ref={provided.innerRef}
            bordered
          >
            {items.map((item, index) => (
              <Draggable key={item} draggableId={item} index={index}>
                {(provided, snapshot) => (
                  <List.Item
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item}
                  </List.Item>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </List>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default MyDraggableList;