Как получить высоту элемента при каждом обновлении страницы

Question

У меня есть область контента на моей странице, которая отображает данные, которые можно получить из API.Я подключил его так, что когда данные извлекаются из API, они сохраняются в хранилище Redux, и страница отображает их.Теперь мне нужно добавить прокрутку к верхней и нижней кнопкам, чтобы, если страница длиннее заданного количества, скажем, 600px, они появлялись.Странно то, что при первой загрузке страницы запрос API не срабатывает, поэтому страница пуста, поэтому кнопки не должны появляться.

Учитывая все это, я не вижу способа, кроме как сделать это в componentDidUpdate ()

componentDidUpdate() {
    let ContentArea = document.getElementById('contentArea');        
    if(ContentArea != null & ContentArea.clientHeight > 0){
        this.props.pageContentHeight(ContentArea.clientHeight)
    }
}

и сохранить значение высоты в хранилище Redux, чтобы в коде я мог отобразитьсвитки вот так:

{(contentHeight > 600) && <Scroll to="bottom" /> }
<Router page={pageURL} />
{(contentHeight > 600) && <Scroll to="top" /> }

contentHeight выше исходит от магазина редуксов.

Из того, что я прочитал, не рекомендуется отправлять в жизненном цикле обновления React, тем более что отправка также приводит к запуску жизненного цикла обновления, это может привести к бесконечному циклу.Могу ли я как-нибудь добиться того, чтобы вы, ребята, думали о добавлении прокрутки к верхней или нижней кнопке на странице?

Этот пакет позволяет прокручивать нижнюю, но не верхнюю часть: https://www.npmjs.com/package/react-scroll-to-bottom

Answer 1

Это совершенно нормально для отправки действий из жизненных циклов. Просто убедитесь, что добавили охранники, чтобы избежать бесконечных петель. То есть отправлять действие из componentDidUpdate можно только в том случае, если необходимо обновить данные.

Answer 2

Спасибо за @pgsandstrom за помощь по теме.

Для тех, кто пытается реализовать полосу прокрутки для области содержимого, я на самом деле настроил Redux для работы с помощью componentDidUpdate, но затем нашел еще лучший подход. Что если мы сможем проверить высоту тела и внутреннюю высоту окна и сравнить, а затем принять решение на основании этого? поэтому приведенный ниже код точно так и делает. По сути, возвращает true, если полоса прокрутки видна на странице, и false, если нет, тогда вы можете принять решение об отображении полосы прокрутки на основе этого.

document.body.scrollHeight > document.body.clientHeight

Я сделал ниже:

componentDidUpdate() {
      if(document.body.clientHeight > window.innerHeight) {
          document.getElementById("topPage").style.display = "block";
          document.getElementById("bottomPage").style.display = "block";
      } else {
          document.getElementById("topPage").style.display = "none";
          document.getElementById("bottomPage").style.display = "none";
      }
  }

убедитесь, что поместили его в компонент, который может распознать обновление.