React-dnd: Bagaimana cara mengubah ukuran pratinjau berdasarkan elemen yang diseret sebenarnya?

Lihat dokumentasi untuk DragLayer (http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html)

Hai, saya memiliki masalah serupa - ingin memberikan gambar untuk pratinjau seret dan bereaksi dnd membuatnya terlalu besar - Saya mencoba mengatur ukuran gambar dengan lebar/tinggi dan style.w/h sebelum meneruskan ke connectDragPreview tanpa efek. Telah menyisir dokumentasi & tidak dapat menemukan penyebutan tentang mengubah ukuran gambar pratinjau. Elemen html aktual yang menampilkan gambar dalam kasus ini terkubur jauh di dalam komponen perpustakaan sehingga tidak mudah diakses juga, jadi solusi paling mudah adalah jika connectDragPreview/dragPreview dapat mengekspos opsi pengubahan ukuran (atau bahkan lebih baik menghormati ukuran gambar yang masuk).

inilah beberapa kode yang tidak berfungsi - mengatur lebar & tinggi gambar tidak berpengaruh, baik dalam fungsi onload atau dalam fungsi setDragImage:

componentDidMount = () => {
this.setDragImage();
};

componentDidUpdate = () => {
this.setDragImage();
};

setDragImage = () => {
const gambar = Gambar baru();
image.src = this.props.imgUrl;
image.onload = () => {
gambar.lebar = gambar.tinggi = 35;
this.props.connectDragPreview(gambar);
}
};

Setiap pembaruan tentang masalah ini?

Anda dapat mencapainya melalui item monitor.

Dalam spesifikasi DragSource di beginDrag yang digunakan untuk mendefinisikan item monitor, Anda mendapatkan instance komponen reaksi sebagai argumen ketiga dan menambahkannya ke item. Kemudian, dengan menggunakan findDOMNode Anda bisa mendapatkan node yang sebenarnya.

Jadi, pertama-tama tambahkan instance komponen ke item.

  beginDrag({ id }, monitor, component) {
    return {
      id,
      component
    };
  },

Nanti di DragLayer Anda memerlukan item tersebut.

const CustomDragLayer = DragLayer(monitor => ({
  item: monitor.getItem(),
  isDragging: monitor.isDragging() // useful
}))(CustomDragLayer);

Sekarang di alat peraga CustomDragLayer Anda akan menerima item yang akan memiliki komponen.

class CustomDragLayer extends Component {
  constructor(props) {
    super(props);
    this.width;
    this.height;

    // Now you can eacily get height or width from node 
    const node = findDOMNode(props.item.component);
    console.log(node.clientWidth);
  }
...

Perhatikan bagaimana findDOMNode ada di constructor , mungkin tidak digunakan di render dan dalam kebanyakan kasus tidak ada kebutuhan yang sebenarnya, Drag Source mungkin memiliki ukuran statis.

@MrBr , terima kasih berhasil.

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.