React-dnd: समान घटकों पर ड्रैगसोर्स और ड्रॉपटार्गेट का उपयोग करना लेकिन ड्रॉपटार्ग से कोई प्रतिक्रिया नहीं

संभवतः इसे एक सहायता फ़ोरम के रूप में अधिक उपयोग करने के लिए क्षमा करें, लेकिन बहुत प्रयासों के बावजूद मैं इस उपयोग के मामले में DropTarget से कोई प्रतिक्रिया प्राप्त करने में असमर्थ हूं।

मैं 'श्रेणी कार्ड' की एक श्रृंखला का उपयोग करना चाहता हूं जो ड्रॉप ईवेंट स्वयं पर पंजीकृत कर सकता है।

क्या मैं यहाँ कोई आकर्षक पेंच बना रहा हूँ?

मैं पुष्टि कर सकता हूं कि ड्रैगसोर्स फ़ंक्शन काम कर रहे हैं, लेकिन ड्रॉपटार्गेट स्पेक फ़ंक्शंस से मैं कुछ भी लॉग इन नहीं कर रहा हूं, यह कंसोल पर बना रहा है, ऐसा लगता है कि वे पूरी तरह से लागू नहीं होते हैं।

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

export const ItemTypes = {
    CATEGORY: 'category-item'
}

class CategoryTreeFork extends Component {

    componentWillReceiveProps = (nextProps) => {
        console.log("Next cat props", nextProps)
    }

    render(){
        var { thisCat, childCat, level, dropEvent } = this.props
        const { connectDragSource, connectDropTarget, isDragging, isOver } = this.props

        return connectDragSource(
            <div className="category-tree-fork">
                <div className={`category-list-item level-${level}`}
                    style={{
                        opacity: isDragging ? 0.5 : 1,
                        backgroundColor: isOver ? "red" : "silver"
                    }}>
                    {thisCat.name}
                </div>
            </div>
        )   
    }   
}

/* get dragged */
const sourceSpec = { 
    beginDrag(props){
        return { category_id: props.thisCat.category_id }
    }   
}

const sourceCollect  = (connect, monitor) => {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()
    }
}


/* get dragged onto */
const targetSpec  = {
    drop(props, monitor, component) {
        const item = monitor.getItem()
        console.log("me or my friend?", item)
    },
    hover(props, monitor, component){
        console.log("yo what you hoverin there for homie?")
    }
}

const targetCollect = (connect, monitor) => {
    return {
        connectDropTarget: connect.dropTarget(),
        isOver: monitor.isOver()
    }
}


export default _.flow([
    DragSource(ItemTypes.CATEGORY, sourceSpec, sourceCollect),
    DropTarget(ItemTypes.CATEGORY, targetSpec, targetCollect)
])(CategoryTreeFork)