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?
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:
Wenn Sie noch etwas brauchen, lassen Sie es mich wissen.
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:
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.
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
undapp/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.