DragSource is not a function

This error message usually occurs when you try to use the `DragSource` function from the `react-dnd` library, but it is not defined or imported correctly.

To resolve this issue, make sure that you have installed the `react-dnd` library and imported the `DragSource` function correctly in your code. Here's an example of how to import it:

import { DragSource } from 'react-dnd';

If you're still having trouble, double check that you're using the correct version of `react-dnd` for your project and that you have followed the installation instructions correctly.

相关问题

React antd 拖拽组件

Ant Design 提供了一个 `Dragger` 组件来实现拖拽上传文件，但如果你想要实现拖拽组件的功能，可以使用 `react-dnd` 库来实现。

1. 安装 `react-dnd` 和 `react-dnd-html5-backend` 库：

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

2. 创建一个可拖拽组件

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

   const boxSource = {
     beginDrag(props) {
       return {
         name: props.name,
       };
     },
   };

   function collect(connect, monitor) {
     return {
       connectDragSource: connect.dragSource(),
       isDragging: monitor.isDragging(),
     };
   }

   class Box extends React.Component {
     render() {
       const { connectDragSource, isDragging } = this.props;
       const opacity = isDragging ? 0.4 : 1;

       return connectDragSource(
         <div style={{ ...style, opacity }}>
           {this.props.children}
         </div>
       );
     }
   }

   const style = {
     border: '1px dashed gray',
     padding: '0.5rem 1rem',
     marginBottom: '.5rem',
   };

   export default DragSource('box', boxSource, collect)(Box);

3. 创建一个可放置组件

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

   const boxTarget = {
     drop(props, monitor, component) {
       const item = monitor.getItem();

       component.setState({
         droppedBoxName: item.name,
       });
     },
   };

   function collect(connect, monitor) {
     return {
       connectDropTarget: connect.dropTarget(),
       isOver: monitor.isOver(),
       canDrop: monitor.canDrop(),
     };
   }

   class TargetBox extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         droppedBoxName: null,
       };
     }

     render() {
       const { canDrop, isOver, connectDropTarget } = this.props;
       const isActive = canDrop && isOver;
       const backgroundColor = isActive ? 'lightgreen' : '#FFF';

       return connectDropTarget(
         <div style={{ ...style, backgroundColor }}>
           {isActive ? 'Release to drop' : 'Drag item here'}
           <br />
           {this.state.droppedBoxName}
         </div>
       );
     }
   }

   const style = {
     height: '8rem',
     width: '8rem',
     marginRight: '1.5rem',
     marginBottom: '1.5rem',
     color: 'black',
     border: '1px solid black',
     textAlign: 'center',
     fontSize: '1rem',
     lineHeight: 'normal',
   };

   export default DropTarget('box', boxTarget, collect)(TargetBox);

4. 在组件中使用

   import React from 'react';
   import Box from './Box';
   import TargetBox from './TargetBox';

   class Container extends React.Component {
     render() {
       return (
         <div>
           <div style={{ overflow: 'hidden', clear: 'both' }}>
             <Box name="Glass" />
             <Box name="Banana" />
             <Box name="Paper" />
           </div>
           <div style={{ overflow: 'hidden', clear: 'both' }}>
             <TargetBox />
           </div>
         </div>
       );
     }
   }

   export default Container;

这样，你就可以在 `Box` 组件上拖拽并在 `TargetBox` 组件上放置了。

如何用react-dnd在拖拽开始时调用函数

要在拖拽开始时调用函数，可以使用 `DragSource` 中的 `beginDrag` 方法。这个方法会在拖拽开始时被调用，并返回一个对象，用于描述正在拖拽的数据。

你可以在 `beginDrag` 方法中调用你想要执行的函数，并将函数的返回值添加到拖拽数据中，以便在放置目标上使用。

以下是一个示例：

import { DragSource } from 'react-dnd';

const myDragSource = {
  beginDrag(props, monitor, component) {
    // 调用想要执行的函数
    const data = props.handleDragStart();

    // 将函数的返回值添加到拖拽数据中
    return { data };
  }
};

function MyComponent(props) {
  // 将 myDragSource 作为高阶组件使用
  const { connectDragSource } = props;
  return connectDragSource(
    <div>拖拽我</div>
  );
}

export default DragSource('myItemType', myDragSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
}))(MyComponent);

在上面的代码中，当用户开始拖拽 `MyComponent` 组件时，`myDragSource.beginDrag` 方法会被调用，并且调用 `props.handleDragStart()` 函数。函数的返回值会被添加到拖拽数据中，可以在放置目标上使用。

注意，`handleDragStart()` 函数需要在 `MyComponent` 组件的 props 中被定义。