在react.js中呈现后，滚动到页面的顶部

我有一个问题，我没有任何想法，如何解决。 在我的反应组件中，我在底部显示一长串数据和几个链接。 点击任何链接后，我将填入新的链接列表，并需要滚动到顶部。

问题是 – 如何在新的集合呈现后滚动到顶端？

'use strict'; // url of this component is #/:checklistId/:sectionId var React = require('react'), Router = require('react-router'), sectionStore = require('./../stores/checklist-section-store'); function updateStateFromProps() { var self = this; sectionStore.getChecklistSectionContent({ checklistId: this.getParams().checklistId, sectionId: this.getParams().sectionId }).then(function (section) { self.setState({ section, componentReady: true }); }); this.setState({componentReady: false}); } var Checklist = React.createClass({ mixins: [Router.State], componentWillMount: function () { updateStateFromProps.call(this); }, componentWillReceiveProps(){ updateStateFromProps.call(this); }, render: function () { if (this.state.componentReady) { return( <section className='checklist-section'> <header className='section-header'>{ this.state.section.name } </header> <Steps steps={ this.state.section.steps }/> <a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`> Next Section </a> </section> ); } else {...} } }); module.exports = Checklist; 

Answer 1

最后..我用：

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

Answer 2

我解决了这个问题，join：

 componentDidUpdate() { ReactDOM.findDOMNode(this).scrollTop = 0 }, 

Answer 3

你可以使用这样的东西。 ReactDom是为了反应。 只是反应，否则。

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

Answer 4

这可能，也可能应该使用参考 ：

“…你可以使用ReactDOM.findDOMNode作为”逃生舱口“，但是我们不build议这样做，因为它破坏了封装，而且在几乎每一种情况下，在React模型中都有更清晰的方式来构build你的代码。

示例代码：

 class MyComponent extends React.Component { componentDidMount() { this._div.scrollTop = 0 } render() { return <div ref={(ref) => this._div = ref} /> } } 

Answer 5

你可以在路由器中这样做：

 ReactDOM.render(( <Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}> <Route path='/' component={App}> <IndexRoute component={Home}></IndexRoute> <Route path="/about" component={About}/> <Route path="/work"> <IndexRoute component={Work}></IndexRoute> <Route path=":id" component={ProjectFull}></Route> </Route> <Route path="/blog" component={Blog}/> </Route> </Router> ), document.getElementById('root')); 

onUpdate={() => window.scrollTo(0, 0)}把滚动顶部。 有关更多信息，请查看： http : //codepen.io/Yuschick/post/react-reset-scroll-position-when-changing-routes

Answer 6

你可以简单地使用：

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

Answer 7

这是另一种方法，可以让你select你希望窗口滚动重置的组件，而不需要重复ComponentDidUpdate。 这只会在路由改变时触发。

通过使用ScrollIntoView（）包装，它将HOC的ComponentDidUpdate公开给传入（挂载）的组件。

Routes.jsx

 import React from 'react'; import { Route, IndexRoute } from 'react-router'; import App from '../components/App.jsx'; import About from '../components/About.jsx'; import Blog from '../components/Blog.jsx' import Index from '../components/Landing.jsx'; import NotFound from '../components/presentational/notfound/NotFound.jsx'; import ScrollIntoView from '../components/presentational/navigation/ScrollIntoView.jsx'; const Routes = ( <Route path="/" component={App}> <IndexRoute component={Index} /> <Route path="/about" component={About} /> <Route path="/blog" component={ScrollIntoView(Blog)} /> <Route path="*" component={NotFound} /> </Route> ); export default Routes; 

ScrollToTop.jsx

 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { withRouter } from 'react-router'; export default function(WrappedComponent) { class ResetWindowScroll extends Component { componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { window.scrollTo(0,0); } } render() { return ( <WrappedComponent {...this.props} /> ); } } return withRouter(ResetWindowScroll); } 

Answer 8

这是我工作的唯一东西（用ES6类组件）：

 componentDidMount() { ReactDOM.findDOMNode(this).scrollIntoView(); }