需要滚动到新页面加载的顶部 - React

Question

我有一个多页应用程序。 当我遍历到新页面时，我需要自动实现滚动到顶部。 我试过以下：

ScrollToTop.js这是放置在组件文件夹中

import React, { Component } from 'react';
import { withRouter } from 'react-router';

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

和App.js

import {Router} from 'react-router-dom'
import ScrollToTop from './common/components/ScrollToTop'
const Appnew = () => (
  <Router>
    <ScrollToTop>
      <Appnew/>
    </ScrollToTop>
  </Router>
)
const App = (props) => {
{Appnew()}
}

这是行不通的。 有什么建议么？

Answer 1

你应该尝试改变这个

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

经过

componentDidMount() {
      window.scroll({
        top: 0,
        left: 0
     });
 }

它会做什么，当组件被安装时，它会滚动到顶部。

你也可以使用下面的事件来监听 DOM 并在加载它时做任何你想做的事情

window.addEventListener('DOMContentLoaded', (event) => {
    // Your code
});

Answer 2

你的 hoc 没有任何问题。 假设您的Appnew具有用Route封装的组件，它应该可以工作。

刚刚使用了你的 hoc 并准备了一个运行良好的演示。 看一看。