Выделите props.location.hash, используя useEffect после монтирования компонентов - PullRequest
Новая
       0

Выделите props.location.hash, используя useEffect после монтирования компонентов

0 голосов
/ 23 сентября 2019

Я создаю страницу глоссария, где у каждого термина есть своя собственная карточка, которая по умолчанию не раскрывается.Каждая карта использует этот термин в качестве идентификатора, потому что все они будут уникальными.Я хочу поддерживать прямые ссылки на определенный термин через хеш URL.

Итак, если URL-адрес localhost: 3000 / # / glossary # Actor, начальная загрузка прокручивается до термина и «открывает» карточку, имитируя щелчок по элементу (открывается обработчик щелчка по этому элементукарта).

Работает, но слишком часто.Каждый раз, когда я вписываю текст в строку поиска или каким-либо образом вызываю рендер, он повторно прокручивается и снова открывает анимацию карты.Я просто хочу сначала прокрутить термин, если есть хеш, а затем игнорировать его, если он не меняется.

Это работает, только если я не включаю массив dep.Если я добавлю массив dep в props.location.hash, el вернется как ноль, и ничего не произойдет.Я знаю, что перезапуск эффекта происходит из-за отсутствия массива dep, но я не знаю, почему он не работает, когда я его добавляю. 

useEffect(() => {
    //looks for hash in URL; gets element associated with the hash
    let el = document.getElementById(decodeURI(props.location.hash.slice(1)));
    console.log(el)

    //if element exists, get coords and offset for header before scrolling
    if (el) {
      const yCoordinate = el.getBoundingClientRect().top + window.pageYOffset;
      const yOffset = -80; 

      window.scrollTo({
          top: yCoordinate + yOffset,
          behavior: 'smooth'
      });

      //opens the card only if not already open
      if (!el.classList.contains('openTermCard')) {
        el.click();
      }
    }
  })

useEffect может быть неправильнымметод.Мне может даже не понадобиться крючок для этого, ИДК.Я просто хочу, чтобы это начальное событие прокрутки происходило при загрузке страницы, а не снова.

1 Ответ

0 голосов
/ 24 сентября 2019

Немного сложно найти решение без работающей песочницы.

Из вашего описания, мне кажется, ваш компонент рендерит более одного раза при первой загрузке.Если вы поместите [] в качестве массива зависимостей, эффект запускается только один раз, когда элемент еще не определен (следовательно, почему вы получаете null), и поэтому он не работает.

Один из способовпойти на это, чтобы думать, что еще вы можете сделать с точки зрения разработки вашего приложения.Вы упоминаете, что каждый раз, когда ваш компонент обновляется, он снова фокусирует карту, но это то, что вы ожидаете, когда используете useEffect.Можно ли реструктурировать компонент так, чтобы родительский элемент (тот, у кого есть этот побочный эффект) не рендерился так часто?

Если вы можете предоставить изолированную программную среду кода, я уверен, что я (ивероятно, другие) сможет помочь вам в дальнейшем.

...