React-dnd: Bereaksi pengaturan DnD untuk contoh yang dapat diurutkan bersarang?

Dibuat pada 12 Nov 2015  ·  7Komentar  ·  Sumber: react-dnd/react-dnd

Saya sedang mengerjakan komponen daftar bersarang menggunakan react-dnd dan saya telah menggunakan contoh sederhana yang dapat diurutkan. Saya bisa membuat drag/drop bekerja untuk node tingkat pertama, tetapi kemudian semua anak menghasilkan "TypeError: node is undefined" ketika mencoba menyeret. Pada dasarnya saya memiliki komponen menu dan komponen item, dan komponen item memanggil dirinya sendiri jika memiliki anak.

Apakah Anda memiliki contoh untuk daftar yang dapat diurutkan bersarang?

Komentar yang paling membantu

@3Cbwaltz ok, lihat ini: https://github.com/tamagokun/example-react-dnd-nested

Anda akan sangat tertarik dengan app/components/Tree app/components/Item dan app/containers/Index untuk melihat bagaimana semuanya diatur. Saya membayangkan mungkin ada banyak peningkatan yang bisa dibuat, tapi saya harap ini membantu.

Semua 7 komentar

Jika Anda memiliki kesalahan, harap buat contoh yang mereproduksi kesalahan ini.
Saya berharap saya bisa menebak apa yang terjadi dari pesan kesalahan tetapi sayangnya saya tidak bisa. :mengedip:

Saya memiliki pengaturan sortable bersarang yang berfungsi di aplikasi yang sedang saya kerjakan.

Saya akan berusaha membersihkannya dan membuangnya di Github.

@3Cbwaltz

Saya menyalin dan menempelkan contoh Anda dan tidak dapat menjalankannya. Itu tidak menjelaskan seperti apa seharusnya prop data . Sayangnya tidak ada cara saya dapat mendiagnosis masalah Anda tanpa Anda memberikan proyek lengkap (dengan dependensi yang ditentukan, dll) yang mereproduksinya. Saya menutup masalah ini tetapi saya senang untuk membuka kembali jika Anda memungkinkan saya untuk melihat apa yang terjadi tanpa menyalin file secara manual dan menemukan tidak ada cukup informasi di dalamnya.

@tamagokun apakah Anda mengatakan bahwa Anda memiliki contoh yang dapat diurutkan bersarang? Saya telah dapat menyempurnakan komponen saya sedikit lebih banyak tetapi masih belum punya waktu untuk membungkus kepala saya dengan sortable bersarang. Berikut ini tautan ke kode sumber lengkap https://bitbucket.org/bwaltz6/flow-builder/overview. Maaf, kodenya banyak dan Anda mungkin tidak dapat mengompilasinya karena menggunakan repositori npm khusus perusahaan. Jika perlu saya bisa mengasahnya. File yang menarik ada di sini:

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

Tidak bisa
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

Saya pikir apa yang perlu saya lakukan sekarang adalah menambahkan tag <ul> di dalam oleh <li> nodeItem dan menjadikannya target penurunan. Di mana saya terpaku adalah, nodeItems saya sudah menjadi target drop dan sumber drag dan semua yang ingin saya lakukan adalah dapat mengulanginya di dalam ul ...di dalam nodeItem. Tidak yakin bagaimana melakukan bagian itu. Apakah saya perlu melakukan semacam warisan?

Biarkan aku menyiapkan sesuatu...

@3Cbwaltz ok, lihat ini: https://github.com/tamagokun/example-react-dnd-nested

Anda akan sangat tertarik dengan app/components/Tree app/components/Item dan app/containers/Index untuk melihat bagaimana semuanya diatur. Saya membayangkan mungkin ada banyak peningkatan yang bisa dibuat, tapi saya harap ini membantu.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat