Torin Torin - 3 months ago 25
React JSX Question

Scroll to the top of the page after render in react.js

I have a problem, which I have no ideas, how to solve.
In my react component I display a long list of data and few links at the bottom.
After clicking on any of this links I fill in the list with new collection of the links and need to scroll to the top.

The problem is - how to scroll to the top after new collection is rendered?

'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
 componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

is a bad solution. first - because this is undefined in arrow functions. second - because of some bug in react-dom, so that always says findDOMNode was called on an unmounted component even if this.isMounted() === true. third - because scrollIntoView is not the right function to scroll to the top.

I solved this problem by adding:

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