React-dnd: Wie verwende ich eine Drittanbieterkomponente als Drag-Quelle?

Gute Frage. Ich denke, das solltest du können:

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

Dies funktioniert, weil connect*() Funktionen prüfen, was Sie ihnen übergeben. Sie können entweder deklarativ verwendet werden (ein DOM React-Element übergeben und im Gegenzug ein DOM React-Element erhalten) oder imperativ (rufen Sie sie mit DOM-Knoten auf und vergessen Sie nicht, sie später mit null aufzurufen – genau wie refs funktionieren ).

(Dies gibt Ihnen auch die Freiheit, ein anderes DOM-Element als Ziehquelle zu verwenden – zum Beispiel können Sie den Knoten abfragen, den Sie von findDOMNode() . Dies sollte als letzter Ausweg verwendet werden, da es schlecht ist, sich auf interne zu verlassen DOM-Struktur einer Drittanbieterkomponente.)

Das hat bei mir nicht funktioniert. Die Verschachtelung ist jetzt korrekt aber das Element ist nicht ziehbar und ich erhalte folgende Fehlermeldung in der Konsole:

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

Ich glaube du hast getippt

import findDOMNode from 'react-dom';

eher, als

import { findDOMNode } from 'react-dom';

Tatsächlich hat react-dom keinen Standardexport, deshalb habe ich einen speziellen benannten Export namens findDOMNode . Mehr zum Unterschied zwischen Standard- und benannten Exporten: http://exploringjs.com/es6/ch_modules.html

Ich war gerade dabei, ein reduziertes Beispiel zu schreiben, aber Sie haben den Fehler zuerst entdeckt!

Ich kenne den Unterschied zwischen Standard- und benannten Exporten, aber ich merke nicht immer, welchen ich benötige, und die Debug-Tools sind nicht gut darin, eine Fehlermeldung auszugeben, die zeigt, was vor sich geht. Ich kann jetzt sehen, wie diese Fehlermeldung auf das Problem hinweist, obwohl sie von Webpack verstümmelt wurde. Danke für die Lektion!

PS: Wenn ich eine Pull-Anfrage einreichen würde, um dies zu den Dokumenten hinzuzufügen (ich bin mir nicht sicher, ob ich Zeit habe), wo würde ich es ablegen? Es wäre hilfreich, wenn der connectDragSource-Fehler auf diese Lösung hinweist.

Ich bin mir nicht sicher, ich denke, die aktuelle Nachricht ist gut genug. Jetzt haben wir dieses Thema auch zum googeln :-)

Übrigens habe ich Ihre Frage noch einmal gelesen und möchte darauf hinweisen, dass Sie sie absolut nicht in <div> speziell einschließen müssen . Der Punkt der Fehlermeldung ist, dass connectDragSource() jedes DOM-Element umschließen muss – <div> , <li> oder irgendetwas anderes. Sie benötigen die obige Problemumgehung nur für benutzerdefinierte Komponenten.

Jetzt haben wir dieses Thema auch zum googeln :-)

Glücklicherweise! :Grinsen:

Ich möchte nur ein wenig Präzision anhängen, wenn Sie es gewohnt sind, die connect*() Aufrufe in Ihren render() s zu verketten, funktioniert das gleiche nicht mit dem obigen Ansatz, stattdessen müssen Sie dies tun folgendes:

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

2 Fragen dazu:
Q1. Können Sie auch die 3. Teilebibliothek als Ziehziel verwenden. Ein Anwendungsfall wäre die Verwendung von Reactstrap "Container" als Ziel und das Ablegen von "Row" oder anderen Komponenten darin, um eine Seite zu erstellen
Q2. Anscheinend funktioniert findDOMNode nicht auf Funktionskomponenten. Wie funktioniert Drag/Drop mit einigen Komponenten von Drittanbietern, wenn sie funktionsfähig sind?