React-dnd: Bagaimana cara menggunakan komponen pihak ketiga sebagai sumber seret?

Pertanyaan bagus. Saya pikir Anda harus dapat melakukan ini:

import { findDOMNode } from 'react-dom';

class DraggableListGroupItem extends Component {
  render() {
    const { connectDragSource, ...rest } = this.props;
    return (
      <ListGroupItem
        {...rest}
        ref={instance => connectDragSource(findDOMNode(instance))}
      />
    );
  }
}

export default DragSource(...)(DraggableListGroupItem);

Ini berfungsi karena fungsi connect*() melihat apa yang Anda berikan. Mereka dapat digunakan secara deklaratif (lewati elemen DOM React dan dapatkan elemen DOM React sebagai imbalannya) atau secara imperatif (panggil mereka dengan simpul DOM dan jangan lupa untuk memanggil mereka dengan null nanti—seperti pekerjaan referensi ).

(Ini juga memberi Anda kebebasan untuk menggunakan beberapa elemen DOM lain sebagai sumber tarik—misalnya, Anda dapat mengkueri simpul yang Anda dapatkan dari findDOMNode() . Ini harus digunakan sebagai upaya terakhir karena bergantung pada internal Struktur DOM dari komponen pihak ketiga.)

Ini tidak berhasil untuk saya. Bersarang sekarang benar tetapi elemen tidak dapat diseret dan saya mendapatkan kesalahan berikut di konsol:

Unhandled promise rejection TypeError: (0 , _reactDom2.default) is not a function(…)

Saya percaya Anda mengetik

import findDOMNode from 'react-dom';

daripada

import { findDOMNode } from 'react-dom';

Memang react-dom tidak memiliki ekspor default, itu sebabnya saya menggunakan ekspor bernama khusus yang disebut findDOMNode . Lebih lanjut tentang perbedaan antara ekspor default dan bernama: http://exploringjs.com/es6/ch_modules.html

Saya sedang mencoba menulis contoh yang dikurangi tetapi Anda menangkap bug terlebih dahulu!

Saya tahu tentang perbedaan antara ekspor default dan bernama tetapi saya tidak selalu memperhatikan mana yang saya butuhkan dan alat debug tidak bagus dalam memberikan pesan kesalahan yang menunjukkan apa yang terjadi. Saya dapat melihat sekarang bagaimana pesan kesalahan itu menunjuk pada masalah meskipun sudah dihancurkan oleh Webpack. Terima kasih untuk pelajarannya!

PS: jika saya mengajukan permintaan tarik untuk menambahkan ini ke dokumen (tidak yakin saya akan punya waktu), di mana saya akan meletakkannya? Akan membantu jika kesalahan connectDragSource menunjuk ke solusi ini.

Tidak yakin, saya pikir pesan saat ini cukup baik. Sekarang kami memiliki masalah ini untuk googling juga :-)

Omong-omong, saya membaca kembali pertanyaan Anda dan ingin menegaskan bahwa Anda sama sekali tidak perlu membungkusnya dengan <div> secara khusus . Maksud dari pesan kesalahan adalah bahwa connectDragSource() perlu membungkus elemen DOM apa pun— <div> , <li> , atau apa pun. Anda hanya memerlukan solusi di atas untuk komponen khusus.

Sekarang kami memiliki masalah ini untuk googling juga :-)

Untung! :menyeringai:

Hanya ingin menambahkan sedikit presisi, jika Anda terbiasa menyambungkan panggilan connect*() di render() , hal yang sama tidak akan berfungsi dengan pendekatan di atas, sebaliknya Anda perlu melakukan mengikuti:

ref={instance => {
  const node = findDOMNode(instance);
  connectDragSource(node);
  connectDropTarget(node);
}}

2 pertanyaan tentang ini:
Q1. Bisakah Anda juga menggunakan pustaka bagian ke-3 sebagai target seret. Use case akan menggunakan reactstrap "Container" sebagai target dan menjatuhkan "Baris" atau komponen lain di dalamnya untuk membangun halaman
Q2. Sepertinya findDOMNode tidak berfungsi pada komponen fungsional. Bagaimana cara melakukan drag/drop dengan beberapa komponen pihak ke-3 jika berfungsi?