Реагируйте на нагрузки компонентов на полпути вниз по странице

Question

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

Код для моего компонента проекта:

<Project
        thumbnail={ProjectBg}
        title={this.state.MyHumberTitle}
        description={this.state.MyHumberDesc}
        type={this.state.MyHumberType}
        path={this.state.MyHumberPath}
      />

Answer 1

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

Когда я использую маршрутизатор, я обычно включаю <ScrollToTop> компонент, который прослушивает изменения маршрута, как описано здесь: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/scroll-restoration.md.

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

Независимо от того, что, вот как вы собираетесь сбросить прокрутку:

window.scrollTo(0, 0)

И вы, вероятно, будете связывать это с функцией componentDidUpdate или вызовом useEffect с соответствующими частями состояния в качестве условий изменения (второй, аргумент массива).

Answer 2

Решение для тех, у кого возникла эта проблема. В новый компонент, который вы хотите загрузить, добавьте:

componentDidMount() {
    window.scrollTo(0, 0)
  }