React-dnd: किसी तृतीय-पक्ष घटक को ड्रैग स्रोत के रूप में कैसे उपयोग करें?

अच्छा प्रश्न। मुझे लगता है कि आपको ऐसा करने में सक्षम होना चाहिए:

import { findDOMNode } from 'react-dom';

class DraggableListGroupItem extends Component {
  render() {
    const { connectDragSource, ...rest } = this.props;
    return (
      <ListGroupItem
        {...rest}
        ref={instance => connectDragSource(findDOMNode(instance))}
      />
    );
  }
}

export default DragSource(...)(DraggableListGroupItem);

यह काम करता है क्योंकि connect*() फ़ंक्शन यह देखते हैं कि आप उन्हें क्या पास करते हैं। उन्हें या तो घोषणात्मक रूप से इस्तेमाल किया जा सकता है (एक डोम रिएक्ट तत्व पास करें और बदले में एक डोम रिएक्ट तत्व प्राप्त करें) या अनिवार्य रूप से (उन्हें डोम नोड के साथ कॉल करें और बाद में उन्हें null साथ कॉल करना न भूलें-जैसे रेफरी काम )

(यह आपको ड्रैग स्रोत के रूप में कुछ अन्य DOM तत्व का उपयोग करने की स्वतंत्रता भी देता है—उदाहरण के लिए, आप findDOMNode() से प्राप्त नोड को क्वेरी कर सकते हैं। इसे अंतिम उपाय के रूप में उपयोग किया जाना चाहिए क्योंकि आंतरिक पर भरोसा करना बुरा है किसी तृतीय-पक्ष घटक की DOM संरचना।)

यह मेरे काम नहीं आया। नेस्टिंग अब सही है लेकिन तत्व खींचने योग्य नहीं है और मुझे कंसोल में निम्न त्रुटि मिलती है:

Unhandled promise rejection TypeError: (0 , _reactDom2.default) is not a function(…)

मुझे विश्वास है कि आपने टाइप किया

import findDOMNode from 'react-dom';

इसके बजाय

import { findDOMNode } from 'react-dom';

वास्तव में react-dom का कोई डिफ़ॉल्ट निर्यात नहीं है, इसलिए मैंने एक विशिष्ट नाम के निर्यात का उपयोग किया जिसे findDOMNode कहा जाता है। डिफ़ॉल्ट और नामित निर्यात के बीच अंतर पर अधिक: http://exploringjs.com/es6/ch_modules.html

मैं एक छोटा उदाहरण लिखने की कोशिश के बीच में था लेकिन आपने पहले बग पकड़ लिया!

मुझे डिफ़ॉल्ट और नामित निर्यात के बीच अंतर के बारे में पता है, लेकिन मुझे हमेशा यह नहीं पता कि मुझे किसकी आवश्यकता है और डीबग टूल एक त्रुटि संदेश देने में महान नहीं हैं जो दिखाता है कि क्या हो रहा है। मैं अब देख सकता हूं कि यह त्रुटि संदेश समस्या पर कैसे इंगित करता है, भले ही इसे वेबपैक द्वारा उलझा दिया गया हो। सबक के लिए धन्यवाद!

पुनश्च: अगर मैं इसे दस्तावेज़ों में जोड़ने के लिए एक पुल अनुरोध दर्ज करना चाहता हूं (सुनिश्चित नहीं है कि मेरे पास समय होगा), तो मैं इसे कहां रखूंगा? यह मदद करेगा अगर ConnectDragSource त्रुटि इस समाधान की ओर इशारा करती है।

निश्चित नहीं, मुझे लगता है कि वर्तमान संदेश काफी अच्छा है। अब हमारे पास गुगलिंग के लिए भी यह मुद्दा है :-)

वैसे मैं आपके प्रश्न को फिर से पढ़ता हूं और एक बिंदु बनाना चाहता हूं कि आपको इसे विशेष रूप से <div> में लपेटने की आवश्यकता नहीं है । त्रुटि संदेश की बात यह है कि connectDragSource() को किसी भी DOM तत्व को लपेटने की आवश्यकता है- <div> , <li> , या कुछ और। कस्टम घटकों के लिए आपको केवल उपरोक्त समाधान की आवश्यकता है।

अब हमारे पास गुगलिंग के लिए भी यह मुद्दा है :-)

सौभाग्य से! मुस्कराहट:

यदि आप connect*() कॉल को अपने render() s में श्रृंखलाबद्ध करने के लिए उपयोग किए जाते हैं, तो बस थोड़ी सटीकता जोड़ना चाहते हैं, वही उपरोक्त दृष्टिकोण के साथ काम नहीं करेगा, इसके बजाय आपको ऐसा करने की आवश्यकता है निम्नलिखित:

ref={instance => {
  const node = findDOMNode(instance);
  connectDragSource(node);
  connectDropTarget(node);
}}

इस पर 2 प्रश्न:
Q1. क्या आप तीसरे भाग पुस्तकालय को ड्रैग लक्ष्य के रूप में भी उपयोग कर सकते हैं। उपयोग के मामले में एक लक्ष्य के रूप में रिएक्टस्ट्रैप "कंटेनर" का उपयोग किया जाएगा और एक पृष्ठ बनाने के लिए "पंक्ति" या उसके अंदर के अन्य घटकों को छोड़ दिया जाएगा
प्रश्न २. ऐसा लगता है कि findDOMNode कार्यात्मक घटकों पर काम नहीं करता है। कुछ तृतीय पक्ष घटकों के साथ ड्रैग/ड्रॉप कैसे करें यदि वे कार्यात्मक हैं?