react-smooth-dnd怎么使用onDragStart设置payload

React Smooth DnD 是一个 React 拖放库，它可以让你轻松地实现拖放功能。

要设置 payload，需要在 onDragStart 回调函数中使用 `setPayload` 方法。以下是一个示例：

import React from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-smooth-dnd';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.onDragStart = this.onDragStart.bind(this);
  }

  onDragStart(payload, source) {
    // 设置 payload
    payload.myData = 'hello world';
  }

  render() {
    return (
      <DragDropContext>
        <Droppable>
          {(droppableProvided, droppableSnapshot) => (
            <div ref={droppableProvided.innerRef}>
              <Draggable onDragStart={this.onDragStart}>
                {(draggableProvided, draggableSnapshot) => (
                  <div ref={draggableProvided.innerRef}>
                    {/* 渲染拖动元素 */}
                  </div>
                )}
              </Draggable>
              {droppableProvided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}

在 `onDragStart` 回调函数中，我们可以通过修改传入的 `payload` 对象来设置拖动时携带的数据。在这个例子中，我们将 `myData` 属性设置为 `'hello world'`。

当拖动元素时，可以使用 `onDrop` 回调函数中的 `payload` 参数来访问设置的数据。

希望这可以帮助到你！