Mobile Safari IOS автоматически прокручивает нижнюю страницу при перезагрузке страницы - PullRequest
Новая
       10

Mobile Safari IOS автоматически прокручивает нижнюю страницу при перезагрузке страницы

0 голосов
/ 30 августа 2018

Я использую реагирование, и как только я перезагружаю страницу в Safari, она автоматически прокручивается внизу страницы без всякой причины. Эта ошибка появляется только при использовании Iphones.

Я изо всех сил пытаюсь найти источник этой ошибки, но понятия не имею.

единственное решение, которое я нашел: 

componentDidMount() {
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 800); 
}

Использование window.scrollTo(0, 0) в componentDidMount () не имеет никакого эффекта, кроме случаев, когда я использую setTimeout, но я не знаю, думаю, что это правильный способ сделать это ..

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

1 Ответ

0 голосов
/ 03 сентября 2018

Наконец-то я понял, почему у меня такое плохое поведение в Safari Mobile.

В моем приложении есть компонент AppContainer, который инкапсулирует все мои маршруты

routes.js 

 <AppContainer location={window.location}>
    <Switch>
        <Route path="/sign-in" component={SignInContainer} />
    </Switch>
</AppContainer>

в котором я экспортирую свой класс по умолчанию export default withRouter((connect(mapStateToProps, mapDispatchToProps)(AppContainer)));

Оказывается, что в этом компоненте componentDidMount() был вызван перед всеми вложенными компонентами в моих маршрутах. Первая проблема, которую я решил, добавив translate в моем экспорте по умолчанию.

Поскольку я использую реагировать-i18следующий с параметрами react: { wait: true }, все вложенные дочерние компоненты имеют export default translate(['common')).

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

Мне просто нужно было добавить

export default withRouter( translate([])(connect(mapStateToProps, mapDispatchToProps)(AppContainer)), );

Теперь жизненный цикл был исправлен, мне просто нужно добавить scrollBy на componentDidMount в AppContainer, и на этот раз я использовал

AppContainer 

  componentDidMount() {
    setTimeout(() => {
        window.scrollTo(0, -5000);
    }, 0);
  }

, а не через 800 мс.

Надеюсь, это поможет людям, которые сталкиваются с той же проблемой.

...