React-dnd: Configuration React DnD pour un exemple triable imbriqué ?

Créé le 12 nov. 2015  ·  7Commentaires  ·  Source: react-dnd/react-dnd

Je travaille sur un composant de liste imbriquée en utilisant react-dnd et j'ai utilisé l'exemple triable simple. Je peux faire fonctionner le glisser/déposer pour les nœuds de premier niveau, mais tous les enfants produisent alors "TypeError : le nœud n'est pas défini" lorsqu'ils essaient de faire glisser. Fondamentalement, j'ai un composant de menu et un composant d'élément, et le composant d'élément s'appelle s'il a des enfants.

Avez-vous un exemple de listes triables imbriquées ?

Commentaire le plus utile

@3Cbwaltz ok, jetez un oeil à ceci : https://github.com/tamagokun/example-react-dnd-nested

Vous serez plus intéressé par app/components/Tree app/components/Item et app/containers/Index pour voir comment tout est configuré. J'imagine qu'il pourrait y avoir beaucoup d'améliorations qui pourraient être apportées, mais j'espère que cela aide.

Tous les 7 commentaires

Si vous avez une erreur, veuillez produire un exemple reproduisant cette erreur.
J'aimerais pouvoir deviner ce qui se passe à partir d'un message d'erreur, mais hélas je ne peux pas. :clin d'œil:

J'ai une configuration triable imbriquée fonctionnelle dans une application sur laquelle je travaille.

Je vais travailler à le nettoyer et à le jeter sur Github.

@3Cbwaltz

J'ai copié collé votre exemple et je n'ai pas réussi à le faire fonctionner. Cela n'explique pas à quoi devrait ressembler l'accessoire data . Malheureusement, je ne peux pas diagnostiquer votre problème sans que vous fournissiez un projet complet (avec les dépendances spécifiées, etc.) qui le reproduit. Je ferme ce problème, mais je serai heureux de le rouvrir si vous me permettez de voir ce qui se passe sans copier manuellement les fichiers et découvrir qu'ils ne contiennent pas suffisamment d'informations.

@tamagokun avez-vous dit que vous aviez un exemple triable imbriqué? J'ai pu étoffer un peu plus mes composants mais je n'ai toujours pas eu le temps de comprendre le tri imbriqué. Voici un lien vers le code source complet https://bitbucket.org/bwaltz6/flow-builder/overview. Désolé, c'est beaucoup de code et vous ne pourrez probablement pas le compiler car il utilise un référentiel npm spécifique à l'entreprise. Si besoin je peux l'affiner. Les fichiers qui vous intéressent sont ici :

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

Menu
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

Je pense que ce que je dois faire maintenant est d'ajouter une balise <ul> à l'intérieur par <li> de nodeItem et d'en faire une cible de dépôt. Là où je bloque, c'est que mes nodeItems sont déjà à la fois des cibles de dépôt et des sources de glissement et tout ce que je veux faire, c'est pouvoir répéter cela à l'intérieur d'un ul ... à l'intérieur du nodeItem. Je ne sais pas comment faire cette partie. Dois-je faire une sorte d'héritage?

Laisse-moi préparer quelque chose...

@3Cbwaltz ok, jetez un oeil à ceci : https://github.com/tamagokun/example-react-dnd-nested

Vous serez plus intéressé par app/components/Tree app/components/Item et app/containers/Index pour voir comment tout est configuré. J'imagine qu'il pourrait y avoir beaucoup d'améliorations qui pourraient être apportées, mais j'espère que cela aide.

Cette page vous a été utile?
0 / 5 - 0 notes