React-pdf: reagiere ref={} ruft dreimal an, benutzerdefinierte Rückrufe sind nicht hilfreich genug

Hey @nnnikolay ,
Ja, dies ist ein völlig normales Verhalten jeder Komponente (wohlgemerkt - Komponente, nicht Element) React-Updates.

Außerdem ist es eine sehr schlechte Idee zu überprüfen, ob die Seite mit der Referenz der Document Komponente gerendert wurde.

Die einzige Methode, die ich empfehlen kann, ist der onRenderSuccess Prop-Callback, der in der Page Komponente platziert wird, auf die Sie auf ein erfolgreiches Rendern achten möchten.

Sie können dies auch tun, indem Sie inputRef prop an die Page Komponente anhängen, wodurch Ihre ref Funktion an das von der Page Komponente gerenderte Root-div-Element übergeben wird. Von dieser Methode wird jedoch abgeraten, da ab 3.0.0 ein Page Root-Div früher als zuvor angezeigt wird, um ein einfacheres Styling zu ermöglichen, während sich die Seite im Lade-/Rendering-Zustand befindet.

Danke @wojtekmaj für die Antwort und die Ideen, vor allem, wie ich sehe, braucht onRenderSuccess kein Argument, daher ist nicht klar, wie ich in diesem Rückruf die Position des DOM-Knotens Page herausfinden kann Seite, ich würde mich freuen, Ihren Rat dazu zu hören.

Trotzdem ist inputRef für mich in Ordnung, weil ich nur wissen muss, wo das <div> gerendert wird (obere und linke Koordinaten) auf der Seite.

Ah richtig. onRenderSuccess sollte eigentlich mehr Informationen darüber geben, was es rendert.

Derzeit können Sie eine Problemumgehung durchführen (Code aus Gründen der Lesbarkeit vereinfacht):

const pageNumber = 1;

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

aber da stimme ich voll und ganz zu. Verbesserungen an Callback-Funktionen landen auf meiner Liste für 3.0! :)

Verbesserungen wurden gerade zusammengeführt und werden erstmals in der kommenden v3.0.0-alpha.3 verfügbar sein.