react-dnd使用

React DnD 是一个 React 的拖放库，可以帮助我们快速实现拖放功能。下面是一个基本的示例：

首先，安装 `react-dnd` 和 `react-dnd-html5-backend`：

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

然后，创建一个拖放组件：

import React from 'react';
import { useDrag } from 'react-dnd';

const Box = ({ name }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { name, type: 'box' },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  });

  return (
    <div
      ref={drag}
      style={{
        opacity: isDragging ? 0.5 : 1,
        fontSize: 20,
        fontWeight: 'bold',
        cursor: 'move',
      }}
    >
      {name}
    </div>
  );
};

export default Box;

在上面的代码中，我们使用 `useDrag` 钩子来创建一个拖动源。`item` 属性指定了拖动源的参数，`collect` 函数用于收集拖动源的状态。

接下来，创建一个拖放目标组件：

import React from 'react';
import { useDrop } from 'react-dnd';

const Target = ({ onDrop }) => {
  const [{ isOver }, drop] = useDrop({
    accept: 'box',
    drop: (item, monitor) => {
      onDrop(item);
    },
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  });

  return (
    <div
      ref={drop}
      style={{
        width: 200,
        height: 200,
        backgroundColor: isOver ? 'yellow' : 'white',
      }}
    />
  );
};

export default Target;

在上面的代码中，我们使用 `useDrop` 钩子来创建一个拖放目标。`accept` 属性指定了接受的拖动源类型，`drop` 函数用于处理拖放事件，`collect` 函数用于收集拖放目标的状态。

最后，在父组件中使用这两个组件：

import React, { useState } from 'react';
import Box from './Box';
import Target from './Target';

const App = () => {
  const [droppedBox, setDroppedBox] = useState(null);

  const handleDrop = (item) => {
    setDroppedBox(item.name);
  };

  return (
    <div>
      <Box name="Box 1" />
      <Box name="Box 2" />
      <Box name="Box 3" />
      <Target onDrop={handleDrop} />
      {droppedBox && <p>Dropped box: {droppedBox}</p>}
    </div>
  );
};

export default App;

在上面的代码中，我们使用 `useState` 钩子来保存拖放目标接受的拖动源名称。`handleDrop` 函数用于处理拖放事件，并更新状态。最后，我们在页面上显示拖放的结果。

这就是一个简单的 React DnD 示例。如果想要了解更多内容，可以查看官方文档：https://react-dnd.github.io/react-dnd/docs/overview。