React-pdf: React ref = {} вызывает три раза, пользовательские обратные вызовы недостаточно полезны

Созданный на 23 янв. 2018 · 4Комментарии · Источник: wojtekmaj/react-pdf

Всем привет,

может я что-то неправильно понимаю, но по какой-то причине, когда я использую ref вот так

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

Трижды вижу следующий вывод:

screenshot 2018-01-23 17 13 23

Что ж, я хочу использовать ref чтобы определить, где он был отображен на странице (offsetTop, offsetLeft и т. Д.), И нет другого способа получить его, кроме как с помощью ref , поэтому мой вопрос это нормально, что он вызывается три раза?

В моем реальном примере я загружаю файл со стороны клиента, но все же у меня такая же проблема :(

PS Код взят из папки sample вашего репозитория

enhancement question

Источник

nnnikolay

Все 4 Комментарий

Привет @nnnikolay ,
да, это совершенно нормальное поведение любого компонента (заметьте - компонента, а не элемента). Реагировать на обновления.

Кроме того, очень плохая идея проверять, была ли страница отрисована с помощью Document компонента ref.

Единственный метод, который я могу порекомендовать, - это обратный вызов onRenderSuccess prop, помещенный в компонент Page вы хотите прослушать для успешного рендеринга.

Вы также можете сделать это, прикрепив inputRef prop к компоненту Page , который передаст вашу функцию ref корневому элементу div, отображаемому компонентом Page . Однако этот метод не рекомендуется, поскольку, начиная с версии 3.0.0, корневой элемент div Page появится раньше, чем раньше, чтобы упростить стилизацию, пока страница находится в состоянии загрузки / рендеринга.

wojtekmaj 24 янв. 2018

Спасибо @wojtekmaj за ответ и за идеи, прежде всего, поскольку я вижу, что onRenderSuccess не принимает никаких аргументов, поэтому неясно, как в этом обратном вызове я могу узнать положение узла Page DOM на page, я был бы рад услышать в этом ваш совет.

Тем не менее, inputRef мне подходит, потому что мне просто нужно знать, где отображается <div> (верхняя и левая координаты) на странице.

nnnikolay 24 янв. 2018

Ах да. onRenderSuccess фактически должен давать больше информации о том, что он отображает.

В настоящее время вы можете найти обходной путь (код упрощен для удобства чтения):

const pageNumber = 1;

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

но я полностью согласен с этим. Улучшения функций обратного вызова попали в мой список для версии 3.0! :)

wojtekmaj 24 янв. 2018

👍1

Улучшения были только что объединены и будут впервые доступны во входящей версии v3.0.0-alpha.3.

wojtekmaj 24 янв. 2018

👍1

Была ли эта страница полезной?

0 / 5 - 0 рейтинги