在 React 组件间进行页面跳转后,发现页面的位置并不在页面顶部,而是在页面跳转前的位置。就是说浏览器的滚动条并没有回到顶部的位置。

经过搜索之后找到了解决方案:Scroll to the top of the page after render in react.js

可以使用下面这种解决,但是这种方式不是一种很好的解决方法。而且 scrollIntoView() 方法并不回到页面的顶部,应该使用 scrollTop = 0 的方式。

1
componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

所以得到的解决方案是:

1
2
3
componentDidUpdate() {
ReactDOM.findDOMNode(this).scrollTop = 0
}

但是我使用这个之后,ESlint 报了个错:no-find-dom-node
查看 eslint-plugin-react文档可以看到 Facebook 不推荐使用 findDOMNode,推荐使用 refs 获取 DOM 节点。

所以推荐的使用方法是:

1
2
3
4
5
6
7
8
class MyComponent extends Component {
componentDidMount() {
this.node.scrollIntoView();
}
render() {
return <div ref={node => this.node = node} />
}
}