Блог

• Мой URL

https://abc1234.com/users#api-doc

• HTML

 
    <div className={parent}>
        <div className={child}>
            {someContent}
            <a id="api-doc">Hello API</a>
        </div>
    </div>

  

Я пишу страницу в ReactJS. Мне нужно реализовать способ, чтобы страница автоматически прокручивалась вниз до хэша, т.Е. api-doc, но почему-то это не автоматическая прокрутка при загрузке страницы (в самый первый раз).

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

 
    componentDidUpdate(){
        let id = this.props.history.location.hash.replace("#", "");
        let element = document.getElementById(id);
        setTimeout(() => {
            if (element) {
                element.scrollIntoViewIfNeeded(true);
            }
        }, 200);
    }
  

Это работает, но я ищу лучший способ добиться того же

Другими словами, я не хочу использовать setTimeout .

Я добавил setTimeout, потому что нашел этот документ.getElementById(id) выдает значение null (в самый первый раз), я предполагаю, что каким-то образом componentDidUpdate выполняется до полного рендеринга. Я также использовал dangerouslySetInnerHTML .

Вы правы, что document.getElementById(id) возвращает null , потому что элемент еще не отрисован.

С React не использовать document.getElementById() . Узлы React сами по себе не являются реальными узлами DOM (например, текстовыми узлами или узлами элементов), а представляют собой потенциальный узел DOM.

Вместо этого используйте useRef() документацию hook React

Создайте следующий компонент.

 import React, { useRef, useEffect }  from 'react';

const myComponent = (props) => {

  const myRef = useRef();

  function scrollToComponent() {
    if (window.location.hash === '#api-doc') {
      myRef.current.scrollIntoView();
      myRef.current.focus();
    }
  }

  useEffect( () => scrollToComponent(), [] )

  return (
    <div ref={myRef} id="api-doc">
       ...
    </div>
  )
};

export default myComponent;
  

Использование useEffect этого способа будет (только) срабатывать при монтировании компонента. (таким образом, избегая проблемы с запуском JS до монтирования компонента)

Функция, которую я назвал scrollToComponent , проверит URL на наличие хэша, если она пройдет условие, она будет прокручиваться до ссылки.

Не забудьте импортировать компонент в ваш основной файл.

* Примечание: использование ссылки от маршрутизатора React может быть лучшим решением. (но один из них мне не знаком)