React-dnd: ¿Configuración de React DnD para un ejemplo ordenable anidado?

Creado en 12 nov. 2015  ·  7Comentarios  ·  Fuente: react-dnd/react-dnd

Estoy trabajando en un componente de lista anidada usando react-dnd y he usado el ejemplo ordenable simple. Puedo hacer que la función de arrastrar y soltar funcione para los nodos de primer nivel, pero luego todos los niños producen "Error de tipo: el nodo no está definido" al intentar arrastrar. Básicamente, tengo un componente de menú y un componente de elemento, y el componente de elemento se llama a sí mismo si tiene elementos secundarios.

¿Tiene un ejemplo de listas ordenables anidadas?

Comentario más útil

@3Cbwaltz ok, echa un vistazo a esto: https://github.com/tamagokun/example-react-dnd-nested

Estará más interesado en app/components/Tree app/components/Item y app/containers/Index para ver cómo está todo configurado. Me imagino que podría haber muchas mejoras que podrían hacerse, pero espero que ayude.

Todos 7 comentarios

Si tiene un error, produzca un ejemplo que reproduzca este error.
Desearía poder adivinar lo que sucede a partir de un mensaje de error, pero lamentablemente no puedo. :guiño:

Tengo una configuración ordenable anidada que funciona en una aplicación en la que estoy trabajando.

Voy a trabajar en limpiarlo y lanzarlo en Github.

@3Cbvals

Copié y pegué tu ejemplo y no pude hacerlo funcionar. No explica cómo debería ser data prop. Desafortunadamente, no hay forma de que pueda diagnosticar su problema sin que proporcione un proyecto completo (con dependencias especificadas, etc.) que lo reproduzca. Estoy cerrando este problema, pero estoy feliz de volver a abrirlo si me permite ver qué sucede sin copiar manualmente los archivos y descubrir que no hay suficiente información en ellos.

@tamagokun , ¿dijiste que tenías un ejemplo clasificable anidado? He podido desarrollar mis componentes un poco más, pero aún no he tenido tiempo de entender la ordenación anidada. Aquí hay un enlace al código fuente completo https://bitbucket.org/bwaltz6/flow-builder/overview. Lo sentimos, es mucho código y probablemente no podrá compilarlo porque está usando un repositorio npm específico de la empresa. Si es necesario, puedo perfeccionarlo. Los archivos de interés están aquí:

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

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

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

Creo que lo que debo hacer ahora es agregar una etiqueta <ul> dentro de <li> de nodeItem y convertirlo en un destino para soltar. Lo que me obsesiona es que mis nodeItems ya son objetivos de colocación y fuentes de arrastre y todo lo que quiero hacer es poder repetir eso dentro de una ul... dentro del nodeItem. No estoy seguro de cómo hacer esa parte. ¿Tengo que hacer algún tipo de herencia?

Déjame preparar algo...

@3Cbwaltz ok, echa un vistazo a esto: https://github.com/tamagokun/example-react-dnd-nested

Estará más interesado en app/components/Tree app/components/Item y app/containers/Index para ver cómo está todo configurado. Me imagino que podría haber muchas mejoras que podrían hacerse, pero espero que ayude.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

djeremh picture djeremh  ·  3Comentarios

gocreating picture gocreating  ·  4Comentarios

dwjohnston picture dwjohnston  ·  3Comentarios

redochka picture redochka  ·  3Comentarios

croraf picture croraf  ·  3Comentarios