Блог

У меня есть приложение react, которое отображает данные на экране. URL имеет формат <DOMAIN>/slug#entityId . Таким образом, после загрузки представления мне нужно перейти к конкретному #entityId , указанному в качестве id элемента HTML. Я использую componentDidUpdate() метод React для прокрутки до идентификатора после выполнения рендеринга.

 componentDidUpdate () {
  if(// data rendered into view) {
    const id = this.entityId;

    if (id) {
      setTimeout(() => {
        const element = document.getElementById(id);

        if (element) {
          element.scrollIntoView({
            behavior: 'smooth'
          });
        }
      }, 500);
    }
  } 
}
  

Таким образом, прокрутка до идентификатора происходит до загрузки изображений. Это приводит к тому, что прокрутка не останавливается в ожидаемом месте. Количество изображений — это их разрешение, которое является переменным.
Увеличение времени ожидания до 1000 мс решает проблему. Но является ли это оптимальным решением?

документ готов

  $(document).ready(function () {
     if(// data rendered into view) {
        const id = this.entityId;
    
        if (id) {
          setTimeout(() => {
            const element = document.getElementById(id);
    
            if (element) {
              element.scrollIntoView({
                behavior: 'smooth'
              });
            }
          }, 500);
        }
      } 
    }
    });