React-pdf: react ref={}가 세 번 호출, 사용자 지정 콜백이 충분히 도움이 되지 않음

안녕하세요 @nnnikolay ,
예, 이것은 모든 구성 요소(요소가 아닌 구성 요소) React 업데이트의 완전히 정상적인 동작입니다.

게다가 Document 컴포넌트의 참조를 사용하여 페이지가 렌더링되었는지 확인하는 것은 매우 나쁜 생각입니다.

내가 추천할 수 있는 유일한 방법은 성공적인 렌더링을 수신하려는 Page 구성 요소에 배치된 onRenderSuccess 소품 콜백입니다.

inputRef prop을 Page 구성 요소에 추가하면 ref 기능이 Page 구성 요소에 의해 렌더링된 루트 div 요소에 전달됩니다. 그러나 이 방법은 3.0.0부터 Page 루트 div가 이전보다 일찍 나타나 페이지가 로드/렌더링 상태일 때 스타일을 쉽게 지정할 수 있으므로 권장하지 않습니다.

답장과 아이디어에 대해 @wojtekmaj 에게 감사드립니다. onRenderSuccess 는 인수를 취하지 않으므로 이 콜백에서 Page DOM 노드 위치를 찾을 수 있는지 명확하지 않습니다. 페이지에서 귀하의 조언을 듣게 되어 기쁩니다.

그럼에도 불구하고 inputRef 는 괜찮습니다. 페이지에서 <div> 가 렌더링되는 위치(상단 및 왼쪽 좌표)를 알아야 하기 때문입니다.

아, 맞아. onRenderSuccess는 실제로 렌더링에 대한 더 많은 정보를 제공해야 합니다.

현재 다음과 같은 해결 방법을 수행할 수 있습니다(가독성을 위해 단순화된 코드).

const pageNumber = 1;

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

그러나 나는 그것에 대해 전적으로 동의합니다. 콜백 기능에 대한 개선 사항이 3.0용 목록에 포함되었습니다! :)

개선 사항은 방금 병합되었으며 들어오는 v3.0.0-alpha.3에서 처음 사용할 수 있습니다.