React-dnd: DnD-Setup für verschachteltes sortierbares Beispiel reagieren?

Erstellt am 12. Nov. 2015  ·  7Kommentare  ·  Quelle: react-dnd/react-dnd

Ich arbeite an einer verschachtelten Listenkomponente mit React-Dnd und habe das einfache sortierbare Beispiel verwendet. Ich kann Drag/Drop für Knoten der ersten Ebene zum Laufen bringen, aber dann erzeugen alle untergeordneten Elemente "TypeError: node is undefined", wenn sie versuchen zu ziehen. Grundsätzlich habe ich eine Menükomponente und eine Artikelkomponente, und die Artikelkomponente ruft sich selbst auf, wenn sie Kinder hat.

Haben Sie ein Beispiel für verschachtelte sortierbare Listen?

Hilfreichster Kommentar

@3Cbwaltz ok, schau dir das an: https://github.com/tamagokun/example-react-dnd-nested

Sie werden am meisten an app/components/Tree app/components/Item und app/containers/Index interessiert sein, um zu sehen, wie alles eingerichtet ist. Ich könnte mir vorstellen, dass es eine Menge Verbesserungen geben könnte, die gemacht werden könnten, aber ich hoffe, es hilft.

Alle 7 Kommentare

Wenn Sie einen Fehler haben, erstellen Sie bitte ein Beispiel, das diesen Fehler wiedergibt.
Ich wünschte, ich könnte anhand einer Fehlermeldung erraten, was vor sich geht, aber leider kann ich das nicht. :zwinkern:

Ich habe ein funktionierendes verschachteltes sortierbares Setup in einer App, an der ich arbeite.

Ich werde daran arbeiten, es aufzuräumen und es auf Github hochzuwerfen.

@3Cbwalzer

Ich habe Ihr Beispiel kopiert und eingefügt und konnte es nicht zum Laufen bringen. Es erklärt nicht, wie data Requisite aussehen sollte. Leider kann ich Ihr Problem nicht diagnostizieren, ohne dass Sie ein vollständiges Projekt (mit angegebenen Abhängigkeiten usw.) bereitstellen, das es reproduziert. Ich schließe dieses Problem, öffne es aber gerne wieder, wenn Sie es mir ermöglichen, zu sehen, was los ist, ohne Dateien manuell zu kopieren und einzufügen und herauszufinden, dass sie nicht genügend Informationen enthalten.

@tamagokun hast du gesagt, du hättest ein verschachteltes sortierbares Beispiel? Ich konnte meine Komponenten etwas weiter ausarbeiten, hatte aber immer noch keine Zeit, mich um verschachtelte sortierbare Elemente zu kümmern. Hier ist ein Link zum vollständigen Quellcode https://bitbucket.org/bwaltz6/flow-builder/overview. Entschuldigung, es ist viel Code und Sie werden ihn wahrscheinlich nicht kompilieren können, da er ein unternehmensspezifisches npm-Repository verwendet. Bei Bedarf kann ich es verfeinern. Die Dateien von Interesse sind hier:

Verpackung
https://bitbucket.org/bwaltz6/flow-builder/src/8c22774c1b59aa381b563f6cf60fb1a5f2b9d39a/dist/FlowBuilder.js?at=master&fileviewer=file-view-default

Speisekarte
https://bitbucket.org/bwaltz6/flow-builder/src/8c22774c1b59aa381b563f6cf60fb1a5f2b9d39a/dist/menu.js?at=master&fileviewer=file-view-default

NodeItem
https://bitbucket.org/bwaltz6/flow-builder/src/8c22774c1b59aa381b563f6cf60fb1a5f2b9d39a/dist/nodeItem.js?at=master&fileviewer=file-view-default

Ich denke, was ich jetzt tun muss, ist, ein <ul> -Tag innerhalb von <li> von nodeItem hinzuzufügen und das zu einem Drop-Ziel zu machen. Wo ich aufhöre, ist, dass meine nodeItems bereits sowohl Drop-Ziele als auch Drag-Quellen sind, und alles, was ich tun möchte, ist in der Lage zu sein, dies innerhalb einer ul ... innerhalb des nodeItem zu wiederholen. Nicht sicher, wie man diesen Teil macht. Muss ich irgendetwas erben?

Lass mich was zaubern...

@3Cbwaltz ok, schau dir das an: https://github.com/tamagokun/example-react-dnd-nested

Sie werden am meisten an app/components/Tree app/components/Item und app/containers/Index interessiert sein, um zu sehen, wie alles eingerichtet ist. Ich könnte mir vorstellen, dass es eine Menge Verbesserungen geben könnte, die gemacht werden könnten, aber ich hoffe, es hilft.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen