Was ist die Verwendung von React DND?

react dnd wird verwendet, um komplexe Drag-and-Drop-Schnittstellen zu erstellen und die Kopplung zwischen Komponenten aufrechtzuerhalten. Bei der Verwendung müssen Sie die Zielkomponente nur mit der entsprechenden API umschließen Ziehen oder Ziehen akzeptieren. Es ist nicht erforderlich, den Ziehstatus zu beurteilen. Führen Sie lediglich die entsprechende Verarbeitung in jedem Statusattribut im eingehenden Spezifikationsobjekt durch.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Wozu dient React DND? React-DnD ist eine Reihe von React-Dienstprogrammen, mit denen Sie komplexe Drag-and-Drop-Schnittstellen erstellen und gleichzeitig die Kopplung zwischen Komponenten aufrechterhalten können. Es eignet sich perfekt für Apps wie Trello und Storify, bei denen durch Ziehen Daten zwischen verschiedenen Teilen der App übertragen werden und Komponenten ihr Erscheinungsbild und ihren App-Status als Reaktion auf Drag-and-Drop-Ereignisse ändern können.

Die oben gezeigte Team-Task-Collaboration-Plattform wird von vielen Unternehmen genutzt. React-DnD ist eine hervorragende Open-Source-Lösung für diese Art von Geschäftsszenario.

Als nächstes stellen wir Ihnen die Verwendung vor.

So verwenden Sie

Installation

Bei der Installation müssen wir gleichzeitig Backend und React-DND installieren.

Warum es so konzipiert ist, wird später in der Quellcode-Analyse ausführlich erklärt.

DndProvider-Injektion

Die DndProvider-Komponente stellt React-DnD-Funktionalität für Ihre Anwendung bereit. Es muss über den Parameter backendc in das Backend eingefügt werden, kann aber auch in das Fensterobjekt eingefügt werden.

Backend ist eine sehr gute Designmethode in React-DnD. Es kann als spezifische Implementierung von Drag & Drop verstanden werden.

DndProvider api

Backend: Erforderlich, das DND-Backend kann die beiden offiziellen HTML5Backends oder TouchBackends verwenden, oder Sie können Ihr eigenes Backend schreiben.
Kontext: Optional konfiguriert der Benutzer den Kontext des Backends, der von der Implementierung des Backends abhängt.
Optionen: Konfigurieren Sie das Backend-Objekt. Sie können das Backend beim Anpassen übergeben. Beispiele gibt es später.

useDrag deklariert die Drag-Quelle.

userDrag ist ein Hook, der verwendet wird, um die aktuelle Komponente als Drag-Quelle zu verwenden.

Die von useDrag zurückgegebenen Parameter sind

arguments[0]: ein Objekt, das die von der Collect-Funktion gesammelten Attribute enthält. Wenn Collect keine Funktion definiert, wird ein leeres Objekt zurückgegeben.
arguments[1]: Die Connector-Funktion der Drag-Quelle. Dies muss an einen ziehbaren Teil des DOM angehängt werden.
arguments[2]: Connector-Funktion für Drag-Vorschau. Dies kann an den Vorschauteil des DOM angehängt werden.
Dann sind die von useDrag übergebenen Parameter

item: erforderlich. Ein einfaches JavaScript-Objekt, das die zu ziehenden Daten beschreibt. Dies sind die einzigen Informationen über die Drag-Quelle, die für das Drop-Ziel verfügbar sind.
item.type: Erforderlich und muss eine Zeichenfolge sein, ES6-Notation. Nur Drop-Ziele, die als derselbe Typ registriert sind, reagieren auf diesen Artikel
previewOptions: Optional. Ein einfaches JavaScript-Objekt, das Drag-Vorschauoptionen beschreibt.
Optionen: Optional, ein einfaches Objekt. Wenn einige der Requisiten Ihrer Komponente nicht skalar sind (d. h. keine primitiven Werte oder Funktionen), kann die Angabe einer benutzerdefinierten Funktion arePropsEqual(props, otherProps) innerhalb des Optionsobjekts die Leistung verbessern. Machen Sie sich keine Sorgen, es sei denn, Sie haben Leistungsprobleme.
begin(monitor): Optional, wird ausgelöst, wenn der Ziehvorgang startet. Es muss nichts zurückgegeben werden, aber wenn ein Objekt zurückgegeben wird, überschreibt es die Standardeigenschaften der Elementspezifikation.
end(item, monitor): Optional, end wird aufgerufen, wenn das Ziehen stoppt.
canDrag(monitor): Optional. Hiermit legen Sie fest, ob das Ziehen derzeit zulässig ist. Standardmäßig erlaubt
isDragging(monitor): Optional. Standardmäßig wird nur die Drag-Quelle, die den Drag-Vorgang initiiert, als Drag betrachtet.
collect: Optionale Sammlungsfunktion.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von React DND?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!