React-dnd: Реагировать на настройку DnD для вложенного сортируемого примера?

Созданный на 12 нояб. 2015  ·  7Комментарии  ·  Источник: react-dnd/react-dnd

Я работаю над компонентом вложенного списка, используя react-dnd, и я использовал простой сортируемый пример. Я могу заставить работать перетаскивание для узлов первого уровня, но тогда все дочерние элементы выдают «TypeError: node is undefined» при попытке перетаскивания. В основном у меня есть компонент меню и компонент элемента, и компонент элемента вызывает сам себя, если у него есть дочерние элементы.

У вас есть пример для вложенных сортируемых списков?

Самый полезный комментарий

@3Cbwaltz хорошо, взгляните на это: https://github.com/tamagokun/example-react-dnd-nested

Вас больше всего заинтересуют app/components/Tree app/components/Item и app/containers/Index , чтобы увидеть, как все настроено. Я полагаю, что можно было бы сделать много улучшений, но я надеюсь, что это поможет.

Все 7 Комментарий

Если у вас есть ошибка, пожалуйста, приведите пример, воспроизводящий эту ошибку.
Хотел бы я догадаться, что происходит, из сообщения об ошибке, но, увы, не могу. :подмигивание:

Ну вот:
http://stackoverflow.com/questions/33659180/react-dnd-not-sure-how-to-get-drag-and-drop-to-fire-for-nested-components-of-t

Если вам нужно что-нибудь еще, дайте мне знать.

У меня есть рабочая вложенная сортируемая установка в приложении, над которым я работаю.

Я собираюсь почистить его и выложить на Github.

@3Cbwaltz

Я скопировал ваш пример и не смог запустить его. Это не объясняет, каким должен быть реквизит data . К сожалению, я не могу диагностировать вашу проблему, если вы не предоставите полный проект (с указанными зависимостями и т. д.), который ее воспроизводит. Я закрываю этот вопрос, но я буду рад открыть его снова, если вы дадите мне возможность увидеть, что происходит, без ручного копирования и вставки файлов и обнаружения, что в них недостаточно информации.

@tamagokun , вы сказали, что у вас есть вложенный сортируемый пример? Я смог немного конкретизировать свои компоненты, но до сих пор не успел обдумать вложенную сортировку. Вот ссылка на полный исходный код https://bitbucket.org/bwaltz6/flow-builder/overview. Извините, это много кода, и вы, вероятно, не сможете его скомпилировать, потому что он использует репозиторий npm для конкретной компании. Если надо, могу подправить. Интересующие файлы находятся здесь:

Обертка
https://bitbucket.org/bwaltz6/flow-builder/src/8c22774c1b59aa381b563f6cf60fb1a5f2b9d39a/dist/FlowBuilder.js?at=master&fileviewer=file-view-default

Меню
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

Я думаю, что сейчас мне нужно добавить тег <ul> внутрь узла nodeItem <li> и сделать его целью перетаскивания. Где я зависаю, так это в том, что мои nodeItems уже являются как целями перетаскивания, так и источниками перетаскивания, и все, что я хочу сделать, это повторить это внутри ul ... внутри nodeItem. Не уверен, как сделать эту часть. Нужно ли делать какое-то наследство?

Позволь мне что-нибудь состряпать...

@3Cbwaltz хорошо, взгляните на это: https://github.com/tamagokun/example-react-dnd-nested

Вас больше всего заинтересуют app/components/Tree app/components/Item и app/containers/Index , чтобы увидеть, как все настроено. Я полагаю, что можно было бы сделать много улучшений, но я надеюсь, что это поможет.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги