React-pdf: react ref={} panggilan tiga kali, panggilan balik khusus tidak cukup membantu

Dibuat pada 23 Jan 2018 · 4Komentar · Sumber: wojtekmaj/react-pdf

Hai, yang di sana,

mungkin saya salah memahami sesuatu tetapi untuk beberapa alasan ketika saya menggunakan ref seperti itu

<Document
  file={file}
  onLoadSuccess={this.onDocumentLoadSuccess}
  ref={node => console.log(node)}
>
....

Saya melihat tiga kali output berikut:

screenshot 2018-01-23 17 13 23

Yah, saya ingin menggunakan ref untuk mendeteksi di mana itu telah dirender pada halaman (offsetTop, offsetLeft dll) dan tidak ada cara lain untuk mendapatkannya kecuali menggunakan ref , jadi pertanyaan saya adalah itu ok bahwa itu memohon tiga kali?

Dalam contoh nyata saya, saya memuat file dari sisi klien, tetapi tetap saja, saya memiliki masalah yang sama :(

PS Kode ini diambil dari folder sample dari repositori Anda

enhancement question

Sumber

nnnikolay

Semua 4 komentar

Hai @nnnikolay ,
ya, ini adalah perilaku yang sepenuhnya normal dari komponen apa pun (ingat - komponen, bukan elemen) Bereaksi pembaruan.

Selain itu, adalah ide yang sangat buruk untuk memeriksa apakah halaman telah dirender menggunakan referensi komponen Document .

Satu-satunya metode yang dapat saya rekomendasikan adalah onRenderSuccess prop callback yang ditempatkan di komponen Page yang ingin Anda dengarkan agar render berhasil.

Anda juga dapat melakukannya dengan melampirkan inputRef prop ke komponen Page , yang akan meneruskan fungsi ref ke elemen root div yang dirender oleh komponen Page . Namun, metode ini tidak disarankan karena dimulai dengan 3.0.0, root div Page akan muncul lebih awal dari sebelumnya untuk memungkinkan penataan yang lebih mudah saat halaman dalam keadaan memuat/render.

wojtekmaj pada 24 Jan 2018

Terima kasih @wojtekmaj untuk membalas dan untuk ide, pertama-tama, seperti yang saya lihat onRenderSuccess tidak mengambil argumen apa pun sehingga tidak jelas bagaimana dalam panggilan balik ini saya dapat mengetahui posisi Node DOM Page di halaman, saya akan senang mendengar saran Anda dalam hal itu.

Namun demikian, inputRef tidak masalah bagi saya, karena saya hanya perlu tahu di mana <div> dirender (koordinat atas dan kiri) pada halaman.

nnnikolay pada 24 Jan 2018

Benar. onRenderSuccess sebenarnya harus memberikan lebih banyak info tentang apa yang dirender.

Saat ini, Anda dapat melakukan solusi (kode disederhanakan agar mudah dibaca):

const pageNumber = 1;

return (
  <Document>
    <Page
      pageNumber={pageNumber}
      onRenderSuccess={() => doSomething(pageNumber)}
    />
  </Document>
);

tapi saya sangat setuju tentang itu. Peningkatan fungsi panggilan balik masuk dalam daftar saya untuk 3.0! :)

wojtekmaj pada 24 Jan 2018

👍1

Perbaikan baru saja digabungkan dan akan tersedia pertama kali di v3.0.0-alpha.3 yang masuk.

wojtekmaj pada 24 Jan 2018

👍1

Apakah halaman ini membantu?

0 / 5 - 0 peringkat