React-pdf: reaccionar ref = {} llamadas tres veces, las devoluciones de llamada personalizadas no son lo suficientemente útiles

Creado en 23 ene. 2018 · 4Comentarios · Fuente: wojtekmaj/react-pdf

Hola,

tal vez no entiendo algo, pero por alguna razón cuando uso ref así

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

Veo tres veces la siguiente salida:

screenshot 2018-01-23 17 13 23

Bueno, quiero usar ref para detectar dónde se ha renderizado en la página (offsetTop, offsetLeft, etc.) y no hay otra forma de obtenerlo excepto usando ref , así que mi pregunta es ¿Está bien que se invoque tres veces?

En mi ejemplo real, cargo el archivo desde el lado del cliente, pero aún así, tengo el mismo problema :(

PD: el código se toma de la carpeta sample de su repositorio

enhancement question

Fuente

nnnikolay

Todos 4 comentarios

Hola @nnnikolay ,
sí, este es un comportamiento completamente normal de cualquier componente (tenga en cuenta: componente, no elemento) React actualizaciones.

Además, es una muy mala idea comprobar si la página se ha renderizado utilizando la referencia del componente Document .

El único método que puedo recomendar es la devolución de llamada onRenderSuccess prop colocada en el componente Page que desea escuchar para un renderizado exitoso.

También puede hacerlo adjuntando inputRef prop al componente Page , que pasará su función ref al elemento div raíz representado por el componente Page . Sin embargo, este método se desaconseja porque a partir de 3.0.0, un div Page root aparecerá antes que antes para permitir un estilo más fácil mientras la página está en estado de carga / renderizado.

wojtekmaj en 24 ene. 2018

Gracias @wojtekmaj por responder y por ideas, en primer lugar, ya que veo que onRenderSuccess no acepta ningún argumento, por lo que no está claro cómo en esta devolución de llamada puedo averiguar la posición del nodo Page DOM en el página, me encantaría escuchar sus consejos al respecto.

Sin embargo, inputRef está bien para mí, porque solo necesito saber dónde se representa <div> (coordenadas superior e izquierda) en la página.

nnnikolay en 24 ene. 2018

Ah bien. onRenderSuccess debería dar más información sobre lo que representa.

Actualmente, puede hacer una solución alternativa (código simplificado para facilitar la lectura):

const pageNumber = 1;

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

pero estoy totalmente de acuerdo con eso. ¡Las mejoras en las funciones de devolución de llamada aterrizan en mi lista para 3.0! :)

wojtekmaj en 24 ene. 2018

👍1

Las mejoras recién se fusionaron y estarán disponibles por primera vez en la versión entrante v3.0.0-alpha.3.

wojtekmaj en 24 ene. 2018

👍1

¿Fue útil esta página

0 / 5 - 0 calificaciones