React-dnd: Woher weiß man "isDragging" in einem "DropTarget"?

Ich würde die Quelle für das einfache sortierbare Beispiel überprüfen. Es hört sich so an, als ob Sie etwas Ähnliches tun möchten, wie sie es mit dem Schwebeflug im cardTarget getan haben.

Da die Quelle erforderlich ist, um ein Element bei beginDrag zurückzugeben, habe ich eine funktionierende Version von isDragging wie folgt implementiert:

import React from 'react';
import { ItemTypes } from '../../constants';
import { DropTarget } from 'react-dnd';

const widgetTarget = {
  drop(props) {
    // moveKnight(props.x, props.y);
  }
};

function collect(connect, monitor) {
  const item = monitor.getItem();
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    item: item,
    isDragging: !!item,
  };
}

@DropTarget(ItemTypes.WIDGET, widgetTarget, collect)
export default class WidgetHolder extends React.Component {
  render() {
    const {
      connectDropTarget,
      isDragging,
      isOver,
      item
    } = this.props;
    const style = {
      width: '100%',
      visibility: isDragging? 'visible': 'hidden',
      backgroundColor: isOver? 'green': 'inherit',
    };
    return connectDropTarget(
      <div style={style}>
        Drop here
      </div>
    );
  }
};

@wdhorton danke für das Referenzbeispiel. Ich werde es überprüfen!

Wenn Sie sich Ihren Code ansehen, können Sie eine hover () - Funktion in Ihrem vorhandenen widgetTarget-Objekt definieren. Es hat die Signatur hover(props, monitor, component) , die Sie nach Belieben verwenden können.

Sie können monitor.getItem() überprüfen. Wenn es existiert, ziehen Sie. Sonst nicht.