React-dnd: Reagir configuração DnD para exemplo classificável aninhado?

Criado em 12 nov. 2015  ·  7Comentários  ·  Fonte: react-dnd/react-dnd

Estou trabalhando em um componente de lista aninhada usando react-dnd e usei o exemplo classificável simples. Eu posso fazer o arrastar/soltar funcionar para nós de primeiro nível, mas todos os filhos produzem "TypeError: node is undefined" ao tentar arrastar. Basicamente, eu tenho um componente de menu e um componente de item, e o componente de item chama a si mesmo se tiver filhos.

Você tem um exemplo para listas classificáveis ​​aninhadas?

Comentários muito úteis

@3Cbwaltz ok, dê uma olhada nisso: https://github.com/tamagokun/example-react-dnd-nested

Você estará mais interessado em app/components/Tree app/components/Item e app/containers/Index para ver como tudo está configurado. Eu imagino que poderia haver muitos aprimoramentos que poderiam ser feitos, mas espero que ajude.

Todos 7 comentários

Se você tiver um erro, produza um exemplo reproduzindo esse erro.
Eu gostaria de poder adivinhar o que acontece a partir de uma mensagem de erro, mas infelizmente não consigo. :piscadela:

Eu tenho uma configuração classificável aninhada em um aplicativo em que estou trabalhando.

Vou trabalhar em limpá-lo e jogá-lo no Github.

@3Cbvalsa

Copiei e colei seu exemplo e não consegui executá-lo. Não explica como deve ser a prop data . Infelizmente, não há como diagnosticar seu problema sem que você forneça um projeto completo (com dependências especificadas etc.) que o reproduza. Estou encerrando este problema, mas ficarei feliz em reabrir se você me permitir ver o que está acontecendo sem copiar manualmente e colar os arquivos e descobrir que não há informações suficientes neles.

@tamagokun você disse que tinha um exemplo classificável aninhado? Consegui detalhar um pouco mais meus componentes, mas ainda não tive tempo de entender a classificação aninhada. Aqui está um link para o código-fonte completo https://bitbucket.org/bwaltz6/flow-builder/overview. Desculpe, é muito código e você provavelmente não conseguirá compilá-lo porque está usando um repositório npm específico da empresa. Se necessário, posso aprimorá-lo. Os arquivos de interesse estão aqui:

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

Cardápio
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

Acho que o que preciso fazer agora é adicionar uma tag <ul> dentro de <li> do nodeItem e torná-la um destino de soltar. Onde eu fico travado é que meus nodeItems já são destinos de soltar e arrastar fontes e tudo que eu quero fazer é poder repetir isso dentro de um ul ... dentro do nodeItem. Não tenho certeza de como fazer essa parte. Preciso fazer algum tipo de herança?

Deixe-me preparar algo...

@3Cbwaltz ok, dê uma olhada nisso: https://github.com/tamagokun/example-react-dnd-nested

Você estará mais interessado em app/components/Tree app/components/Item e app/containers/Index para ver como tudo está configurado. Eu imagino que poderia haver muitos aprimoramentos que poderiam ser feitos, mas espero que ajude.

Esta página foi útil?
0 / 5 - 0 avaliações