La manipulation de défilement de l'Animation à Réagir

Quel est le corriger façon de traiter avec la position de défilement de Réagir? J'aime vraiment le défilement régulier en raison d'une meilleure expérience utilisateur. Depuis la manipulation du DOM à Réagir est un anti-modèle que j'ai couru dans un problème: comment faire défiler en douceur à une position/d'élément? J'ai l'habitude de changer scrollTop valeur d'un élément, mais c'est une manipulation du DOM, qui n'est pas autorisé.

JSBIN

code:

import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  handleClick = e => {
    for (let i = 1; i <= 100; i++) {
      setTimeout(() => (this.node.scrollTop = i), i * 2);
    }
  };

  render() {
    const someArrayToMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    return (
      <div ref={node => this.node = node} style={{overflow: 'auto', height: '100vh'}}>
        <button onClick={this.handleClick}>CLICK TO SCROLL</button>
        {
            [...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap].map((e, i) => <div key={i}>some text here</div>)
        }
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

La façon d'atteindre cet objectif dans un Réagir?

OriginalL'auteur sympi | 2017-06-05