在react-dnd中找不到DragSource

Question

我正在学习 React 中的拖放操作，但我不断收到此错误（参见图片），即 React-dnd 中不存在 DragSource。我已经使用“npm install react-dnd”安装了react-dnd。在我所做的研究中，我还没有看到这个错误的任何答案。

node_modules 中的 React-dnd 包

代码如下：

import React, {Component} from 'react'
import {DragSource} from 'react-dnd'

const itemSource = {
    beginDrag(props) {
        return props.item
    },
    endDrag(props, monitor, component) {
        return props.handleDrop(props.item.id)
    }
}

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

class Item extends Component {
    render() {
        
const { isDragging, connectDragSource, item } = this.props;
        return connectDragSource(
            <div className='item'>
                <span>{item.name}</span> 
            </div> 
        )
    }
}

export default DragSource('item', itemSource, collect)(Item)

Answer 1

根据react-dnd release v15.0.0

装饰器 API 已被删除并完全被 Hooks 取代
API

装饰器 API 包括 DragSource 和 DropTarget。
它们可以被react-dnd 中的useDrag 和useDrop 钩子替换。