React-dnd: "कैनड्रॉप", कैसे पता चलेगा कि हम किस तत्व के शीर्ष पर हैं?

अरे, तुम भाग्य में हो! मैंने लगभग इसे पहले ही लागू कर दिया है, इसलिए मुझे कुछ कोड एक साथ फेंकने दें।

ठीक है, तो विचार यह है कि आप अपने घटक में राज्य सेट करना चाहते हैं, और फिर जब राज्य सेट हो जाता है, तो आप कक्षा जोड़ते हैं।

मान लें कि आप फू को बार में खींच रहे हैं:

import React, { Component } from "react";
import classNames from "classnames";

class Bar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // Where a foo is hovering over the component.  One of null, "above", or "below"
      fooHover: null,
    };
  }

  render() {
    const { fooHover } = this.state;

    const classes = classNames("bar", {
      "bar-above": fooHover === "above",
      "bar-below": fooHover === "below",
    });
  }
}

एकमात्र सवाल यह है कि हम उस राज्य को कैसे सेट करते हैं!

import { findDOMNode } from "react-dom";

const barTarget = {
  ...
  hover(props, monitor, component) {
    if (!monitor.canDrop()) {
      return;
    }

    const rawComponent = undecorate(component); // undecorate described below

    const { y } = monitor.getClientOffset();
    const { top, height } = findDOMNode(component).getBoundingClientRect();

    if (y < top + height/2) {
      rawComponent.setFooHover("above"); // setFooHover described below
    } else {
      rawComponent.setFooHover("below");
    }
  },
  ...
}

तो मूल रूप से, आप अपने घटक, setFooHover एक इंस्टेंस विधि को कॉल करना चाहते हैं, जो setState कॉल करेगा। यह प्रदर्शन कारणों से इस तरह दिखना चाहिए:

  // In Bar
  setFooHover(fooHover) {
    if (fooHover !== this.state.fooHover) {
      this.setState({ fooHover });
    }
  }

मैं ऊपर undecorate क्यों कॉल कर रहा हूं इसका कारण यह है कि प्रतिक्रिया-डीएनडी उच्च क्रम घटकों का उपयोग करता है, और हम अलिखित घटकों को चाहते हैं। यह मेरी राय में उच्च क्रम के घटकों की एक बदसूरत जटिलता है। हो सकता है कि आप इसके बजाय अपने फ्लक्स स्टोर या किसी चीज़ पर कार्रवाई भेजकर इसे लागू कर सकें, लेकिन यदि आप इसे मेरी तरह करने का निर्णय लेते हैं, तो यह मेरा undecorate :

function undecorate(component) {
  let curr = component;
  while (typeof curr.getDecoratedComponentInstance === "function") {
    curr = curr.getDecoratedComponentInstance();
  }

  return curr;
}

अब यदि आप इसे लागू करते हैं, तो एक छोटी सी समस्या को छोड़कर सब कुछ अच्छा दिखने लगेगा। कक्षा कभी नहीं जाती! कोई भी कभी भी setHoverState(null) कॉल नहीं करता है (आपके बार लक्ष्य में एंडहोवर फ़ंक्शन जैसी कोई चीज़ नहीं है)। इसे संभालने का उचित तरीका इस तरह componentWillReceiveProps उपयोग करना है:

  componentWillReceiveProps(nextProps) {
    if (this.props.isFooOver && !nextProps.isFooOver) {
      this.setState({ fooHover: null });
    }
  }

(अपने संग्रह समारोह में { isFooOver: monitor.isOver() } जोड़ना न भूलें)

मुझे बताएं कि यह कैसे जाता है!

विस्तृत स्पष्टीकरण के लिए बहुत बहुत धन्यवाद! मैं आपको बता दूँगा :)

अंत में, मैंने Redux दृष्टिकोण का उपयोग किया, इसलिए जब ड्रॉप इवेंट को निकाल दिया गया तो मैंने मूल रूप से एक रेड्यूसर के माध्यम से एक ईवेंट भेजा।

    drop: (propsTargetItem, monitor, targetItem) ->
        draggedItem = monitor.getItem()# Item that has been dragged and eventually dropped.
        coordsDrop = monitor.getClientOffset()# Coords of the drop action.
        diff = monitor.getDifferenceFromInitialOffset()# Comparison of the initial click (dragging start) against the end of the click (dropping start).

        patternId = draggedItem.patternId
        patternPosition = draggedItem.position
        targetId = propsTargetItem.context.patternId
        targetPosition = propsTargetItem.context.position
        isCursorAboveHalf = GeoService.isAboveHalf(ReactDOM.findDOMNode(targetItem), coordsDrop.y)

        # Extract positions in the array of children.
        oldPosition = draggedItem.position# Current position of the item, which will be the old position as soon as the item is moved. (by the server through sockets)
        newPosition = calcDropPosition(targetId, patternId, patternPosition, targetPosition, isCursorAboveHalf)# Position where we will move the dragged item.

        # Dispatch only if the position has changed and is set.
        if oldPosition isnt newPosition and newPosition?
            draggedItem.moveDnDPattern(Object.assign({}, draggedItem, {newPosition: newPosition, oldPosition: oldPosition}))