react拖拽排序组件怎么使用

要使用React拖拽排序组件，首先需要安装相关的库。最常用的库是react-dnd和react-dnd-html5-backend。

首先，在你的项目中安装这两个库：

npm install react-dnd react-dnd-html5-backend

创建一个可拖拽的组件。你可以使用react-dnd提供的DragSource和DropTarget高阶组件来实现拖拽功能。

import { DragSource, DropTarget } from "react-dnd";const ItemTypes = {  CARD: "card"};// 创建一个DragSourceconst cardSource = {  beginDrag(props) {    return {      id: props.id,      index: props.index    };  }};const collectDragSource = (connect, monitor) => {  return {    connectDragSource: connect.dragSource(),    isDragging: monitor.isDragging()  };};// 创建一个DropTargetconst cardTarget = {  drop(props, monitor) {    const dragIndex = monitor.getItem().index;    const hoverIndex = props.index;    // 在这里可以调用一个回调函数来更新排序    props.onMove(dragIndex, hoverIndex);  }};const collectDropTarget = (connect, monitor) => {  return {    connectDropTarget: connect.dropTarget()  };};// 最终的可拖拽组件const DraggableCard = ({ text, isDragging, connectDragSource, connectDropTarget }) => {  return connectDragSource(    connectDropTarget(      <div style={{ opacity: isDragging ? 0.5 : 1 }}>        {text}      </div>    )  );};export default DragSource(ItemTypes.CARD, cardSource, collectDragSource)(  DropTarget(ItemTypes.CARD, cardTarget, collectDropTarget)(DraggableCard));

创建一个容器组件，用来渲染拖拽排序的列表。

import { useState } from "react";import update from "immutability-helper";import DraggableCard from "./DraggableCard";const SortableList = () => {  const [cards, setCards] = useState([    { id: 1, text: "Card 1" },    { id: 2, text: "Card 2" },    { id: 3, text: "Card 3" }  ]);  const handleMoveCard = (dragIndex, hoverIndex) => {    const dragCard = cards[dragIndex];    setCards(      update(cards, {        $splice: [          [dragIndex, 1],          [hoverIndex, 0, dragCard]        ]      })    );  };  return (    <div>      {cards.map((card, index) => (        <DraggableCard          key={card.id}          id={card.id}          index={index}          text={card.text}          onMove={handleMoveCard}        />      ))}    </div>  );};export default SortableList;

最后，在你的应用中使用SortableList组件。

import SortableList from "./SortableList";const App = () => {  return (    <div>      <h1>Sortable List</h1>      <SortableList />    </div>  );};export default App;

现在，你就可以在应用中使用拖拽排序组件了。当你拖拽一个卡片并放置到另一个位置时，列表将会重新排序。