Блог

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

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

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

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

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

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

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

 window.scrollTo(0, 0)
  

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

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

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