React-dnd: वास्तविक ड्रैग किए गए तत्व के आधार पर पूर्वावलोकन का आकार कैसे बदलें?

ड्रैगलेयर के लिए दस्तावेज़ देखें (http://gaearon.github.io/react-dnd/examples-drag-round-custom-drag-layer.html)

अरे मेरे पास एक समान समस्या है - ड्रैग पूर्वावलोकन के लिए एक छवि देना चाहते हैं और प्रतिक्रिया डीएनडी इसे बहुत बड़ा बना रही है - मैंने बिना किसी प्रभाव के कनेक्टड्रैग पूर्वावलोकन में जाने से पहले छवि आकार को चौड़ाई/ऊंचाई और शैली के साथ सेट करने का प्रयास किया। दस्तावेज़ीकरण में कंघी की है और पूर्वावलोकन छवि का आकार बदलने का कोई उल्लेख नहीं मिला है। वास्तविक एचटीएमएल तत्व जो इस मामले में छवि प्रदर्शित करता है उसे लाइब्रेरी घटक में गहराई से दफनाया जाता है ताकि वह आसानी से पहुंच योग्य न हो, इसलिए सबसे सरल समाधान होगा यदि कनेक्टड्रैगप्रेव्यू/ड्रैगप्रेव्यू एक आकार बदलने के विकल्प का पर्दाफाश कर सकता है (या इससे भी बेहतर आकार का सम्मान छवि पास हुई)।

यहां कुछ गैर-कार्यशील कोड है - छवि चौड़ाई और ऊंचाई को सेट करने से कोई प्रभाव नहीं पड़ता है, या तो ऑनलोड फ़ंक्शन में या सेटड्रैग इमेज फ़ंक्शन में:

कंपोनेंटडिडमाउंट = () => {
this.setDragImage ();
};

कंपोनेंटडिडअपडेट = () => {
this.setDragImage ();
};

सेटड्रैग इमेज = () => {
कास्ट छवि = नई छवि ();
image.src = this.props.imgUrl;
इमेज.ऑनलोड = () => {
छवि। चौड़ाई = छवि। ऊंचाई = 35;
this.props.connectDragPreview (छवि);
}
};

इस मुद्दे पर कोई अपडेट?

आप इसे मॉनिटर आइटम पर प्राप्त कर सकते हैं।

ड्रैगसोर्स स्पेक में beginDrag जिसका उपयोग मॉनिटर आइटम को परिभाषित करने के लिए किया जाता है, आपको तीसरे तर्क के रूप में प्रतिक्रिया घटक उदाहरण मिलता है और इसे आइटम में जोड़ें। बाद में, findDOMNode का उपयोग करके आप वास्तविक नोड प्राप्त कर सकते हैं।

इसलिए, पहले आइटम में कंपोनेंट इंस्टेंस जोड़ें।

  beginDrag({ id }, monitor, component) {
    return {
      id,
      component
    };
  },

बाद में ड्रैगलेयर में आपको आइटम की आवश्यकता होती है।

const CustomDragLayer = DragLayer(monitor => ({
  item: monitor.getItem(),
  isDragging: monitor.isDragging() // useful
}))(CustomDragLayer);

अब CustomDragLayer प्रॉप्स में आपको वह आइटम प्राप्त होगा जिसमें कंपोनेंट होगा।

class CustomDragLayer extends Component {
  constructor(props) {
    super(props);
    this.width;
    this.height;

    // Now you can eacily get height or width from node 
    const node = findDOMNode(props.item.component);
    console.log(node.clientWidth);
  }
...

ध्यान दें कि findDOMNode constructor कैसा है, इसका उपयोग render में नहीं किया जा सकता है और ज्यादातर मामलों में कोई वास्तविक आवश्यकता नहीं है, ड्रैग सोर्स का आकार स्थिर हो सकता है।

@MrBr , धन्यवाद यह काम कर रहा है।

इस समस्या को स्वचालित रूप से पुराने के रूप में चिह्नित कर दिया गया है क्योंकि इसमें हाल की गतिविधि नहीं है। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।