在 react-dnd 中找不到 DragSource答案

【问题标题】：DragSource is not found in react-dnd在 react-dnd 中找不到 DragSource
【发布时间】：2022-06-12 03:50:15
【问题描述】：

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

react-dnd package in node_modules

代码如下：


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)

【问题讨论】：

标签： reactjs drag-and-drop react-dnd

【解决方案1】：

根据react-dndrelease v15.0.0

装饰器 API 已被移除并完全被 Hooks 取代接口

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

【讨论】：