Блог

Главная - Вопросы по программированию - Как получить высоту элемента при каждом обновлении страницы

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

#reactjs #react-redux #react-lifecycle

#reactjs #реагировать-redux #реагировать-жизненный цикл

Вопрос:

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

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

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

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

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

Высота содержимого выше поступает из redux Store.

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

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

Ответ №1:

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

Комментарии:

1. Хорошо, итак, как бы вы решили эту проблему?

2. У вас есть доступ к значению redux, и у вас есть доступ к текущей высоте элемента. Сравните два. Если они отличаются, запустите действие.

Ответ №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";
      }
  }

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