react-smooth-dnd开始拖拽时怎么设置payload属性

React Smooth DnD 是一个用于实现平滑拖放操作的 React 组件库。要设置 `payload` 属性，需要在拖拽开始时使用 `beginDrag` 回调函数返回一个包含 `payload` 属性的对象，例如：

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

function MyDraggableComponent(props) {
  const { data } = props;
  
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'my-draggable-component', payload: { id: data.id } },
    collect: (monitor) => ({
      isDragging: monitor.isDragging()
    })
  });
  
  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      {/* render draggable content */}
    </div>
  );
}

在上面的例子中，我们使用了 `useDrag` Hook 来创建一个拖拽对象，其中 `item` 是必须的，它包含了拖拽时需要传递给目标区域的数据。在这里，我们设置了 `type` 为 `'my-draggable-component'`，表示这是一个自定义的拖拽类型，同时设置了 `payload` 属性为一个包含 `id` 属性的对象，表示这个可拖拽组件的唯一标识符。

当拖拽开始时，React Smooth DnD 会调用 `beginDrag` 回调函数，并将 `item` 对象传递给它。在这个回调函数中，我们可以从 `item` 对象中获取 `payload` 属性，并将其存储到拖拽状态中，例如：

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

function MyDraggableComponent(props) {
  const { data, onDragStart } = props;
  
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'my-draggable-component', payload: { id: data.id } },
    begin: (monitor) => {
      onDragStart(monitor.getItem().payload.id);
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging()
    })
  });
  
  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      {/* render draggable content */}
    </div>
  );
}

在这个例子中，我们通过 `begin` 属性设置了拖拽开始时的回调函数，在这个回调函数中，我们获取了拖拽对象的 `payload` 属性，并将其传递给了外部的 `onDragStart` 回调函数。这样，我们就可以在拖拽开始时获取到拖拽对象的数据，并进行相应的处理。