React-dnd: "canDrop", 우리가 어떤 요소 위에 있는지 어떻게 알 수 있습니까?

이봐, 당신은 운이 좋다! 나는 이것을 거의 정확하게 구현한 적이 있으므로 몇 가지 코드를 함께 보겠습니다.

좋습니다. 따라서 아이디어는 구성 요소에서 상태를 설정하고 상태가 설정되면 클래스를 추가하는 것입니다.

Foo를 Bar로 드래그한다고 가정해 보겠습니다.

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");
    }
  },
  ...
}

따라서 기본적으로 setState 를 호출하는 setFooHover 구성 요소의 인스턴스 메서드를 호출하려고 합니다. 성능상의 이유로 다음과 같아야 합니다.

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

위에서 undecorate 라고 부르는 이유는 react-dnd가 더 높은 차수의 구성 요소를 사용하고 우리는 포장되지 않은 구성 요소를 원하기 때문입니다. 이것은 내 생각에 고차 구성 요소의 추악한 합병증입니다. 플럭스 스토어나 무엇인가에 액션을 보내 대신 구현할 수도 있지만, 저처럼 하기로 결정한 경우를 대비하여 여기 undecorate .

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

  return curr;
}

이제 이것을 구현하면 하나의 작은 문제를 제외하고 모든 것이 좋아 보일 것입니다. 수업은 절대 사라지지 않습니다! 아무도 setHoverState(null) 호출하지 않습니다(barTarget에 endHover 기능과 같은 것은 없습니다). 이것을 처리하는 적절한 방법은 다음과 같이 componentWillReceiveProps 것입니다.

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

(수집 기능에 { isFooOver: monitor.isOver() } 를 추가하는 것을 잊지 마십시오)

어떻게 되는지 알려주세요!

자세한 설명 정말 감사합니다! 내가 알려 주마 :)

마지막으로 Redux 방식을 사용했기 때문에 기본적으로 drop 이벤트가 발생했을 때 리듀서를 통해 이벤트를 전달했습니다.

    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}))