React-pdf: réagir ref={} appels trois fois, les rappels personnalisés ne sont pas assez utiles

Créé le 23 janv. 2018 · 4Commentaires · Source: wojtekmaj/react-pdf

Salut,

peut-être que je comprends mal quelque chose, mais pour une raison quelconque, lorsque j'utilise ref comme ça

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

Je vois trois fois la sortie suivante :

screenshot 2018-01-23 17 13 23

Eh bien, je veux utiliser ref pour détecter où il a été rendu sur la page (offsetTop, offsetLeft, etc.) et il n'y a pas d'autre moyen de l'obtenir que d'utiliser ref , donc ma question est c'est bon qu'il invoque trois fois ?

Dans mon exemple réel, je charge le fichier côté client, mais j'ai toujours le même problème :(

PS Le code est extrait du dossier sample de votre référentiel

enhancement question

Source

nnnikolay

Tous les 4 commentaires

Salut @nnnikolay ,
oui, il s'agit d'un comportement tout à fait normal de n'importe quel composant (rappelez-vous - composant, pas élément) Mises à jour React.

De plus, c'est une très mauvaise idée de vérifier si la page a été rendue en utilisant la référence du composant Document .

La seule méthode que je peux recommander est le rappel de onRenderSuccess prop placé dans le composant Page vous voudriez écouter pour un rendu réussi.

Vous pouvez également le faire en attachant inputRef prop au composant Page , qui transmettra votre fonction ref à l'élément div racine rendu par le composant Page . Cependant, cette méthode est déconseillée car à partir de la version 3.0.0, une div racine Page apparaîtra plus tôt qu'avant pour permettre un style plus facile pendant que la page est en état de chargement/rendu.

wojtekmaj le 24 janv. 2018

Merci @wojtekmaj d' avoir répondu et pour des idées, tout d'abord, comme je vois que onRenderSuccess ne prend aucun argument, donc il n'est pas clair comment dans ce rappel je peux trouver la position de Page DOM Node sur le page, je serais heureux d'entendre vos conseils à ce sujet.

Néanmoins, inputRef me convient, car j'ai juste besoin de savoir où le <div> est rendu (coordonnées en haut et à gauche) sur la page.

nnnikolay le 24 janv. 2018

Ah, d'accord. onRenderSuccess devrait en fait donner plus d'informations sur ce qu'il rend.

Actuellement, vous pouvez faire une solution de contournement (code simplifié pour la lisibilité) :

const pageNumber = 1;

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

mais je suis tout à fait d'accord là dessus. Les améliorations des fonctions de rappel arrivent sur ma liste pour la 3.0 ! :)

wojtekmaj le 24 janv. 2018

👍1

Les améliorations viennent d'être fusionnées et seront d'abord disponibles dans la nouvelle version v3.0.0-alpha.3.

wojtekmaj le 24 janv. 2018

👍1

Cette page vous a été utile?

0 / 5 - 0 notes