React-pdf: react ref = {} chamadas três vezes, retornos de chamada personalizados não são úteis o suficiente

Criado em 23 jan. 2018 · 4Comentários · Fonte: wojtekmaj/react-pdf

Olá,

talvez eu não tenha entendido algo, mas por algum motivo quando uso ref assim

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

Eu vejo três vezes após a saída:

screenshot 2018-01-23 17 13 23

Bem, eu quero usar ref para detectar onde foi renderizado na página (offsetTop, offsetLeft etc) e não há outra maneira de obtê-lo exceto usando ref , então minha pergunta é tudo bem que esteja invocando três vezes?

No meu exemplo real, carrego o arquivo do lado do cliente, mas ainda assim, tenho o mesmo problema :(

PS O código é retirado da pasta sample do seu repositório

enhancement question

Fonte

nnnikolay

Todos 4 comentários

Ei @nnnikolay ,
sim, este é um comportamento totalmente normal de qualquer componente (lembre-se - componente, não elemento) atualizações React.

Além disso, é uma péssima ideia verificar se a página foi renderizada usando a referência do componente Document .

O único método que posso recomendar é onRenderSuccess prop callback colocado em Page componente que você gostaria de ouvir para uma renderização bem-sucedida.

Você também pode fazer isso anexando inputRef prop ao componente Page , que passará sua função ref para o elemento div raiz renderizado pelo componente Page . No entanto, esse método é desencorajado porque a partir do 3.0.0, um div de raiz Page aparecerá mais cedo do que antes para permitir um estilo mais fácil enquanto a página está no estado de carregamento / renderização.

wojtekmaj em 24 jan. 2018

Obrigado @wojtekmaj por responder e pelas ideias, em primeiro lugar, como vejo que onRenderSuccess não aceita nenhum argumento, então não está claro como neste retorno de chamada posso descobrir a posição do nó Page DOM no página, eu ficaria feliz em ouvir seus conselhos sobre isso.

No entanto, inputRef está ok para mim, porque eu só preciso saber onde <div> é renderizado (coordenadas superior e esquerda) na página.

nnnikolay em 24 jan. 2018

Ah, certo. onRenderSuccess deve realmente fornecer mais informações sobre o que ele renderiza.

Atualmente, você pode fazer uma solução alternativa (código simplificado para facilitar a leitura):

const pageNumber = 1;

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

mas concordo plenamente com isso. Melhorias nas funções de retorno de chamada chegam à minha lista do 3.0! :)

wojtekmaj em 24 jan. 2018

👍1

As melhorias acabaram de ser mescladas e estarão disponíveis pela primeira vez na versão 3.0.0-alpha.3.

wojtekmaj em 24 jan. 2018

👍1

Esta página foi útil?

0 / 5 - 0 avaliações