использовать Waypoint с React для выполнения функции после прокрутки

Question

У меня есть счетчик, который подсчитывает число на странице. Мне нужно, чтобы он запускал пользователь, который прокручивается до этой точки на странице. Как мне это сделать с помощью Waypoint? Или есть другое решение?

import React, { Component } from 'react'; 
import Waypoint from 'react-waypoint'; 

var Counter2017 = React.createClass({ 

    getInitialState: function() { 
     return {visionElapsed: 0}; 
    }, 
    tick: function() { 
     if (this.state.visionElapsed < 125) { 
     this.setState({visionElapsed: this.state.visionElapsed + 1}); 
     } 
    }, 
    componentDidMount: function() { 
     this.interval = setInterval(this.tick, 15); 
    }, 
    componentWillUnmount: function() { 
     clearInterval(this.interval); 
    }, 
    render: function() { 
     return (
     <span>{this.state.visionElapsed}</span> 
    ); 
    } 
}); 

export default Counter2017; 

Answer 1

Вы можете использовать componentDidUpdate(prevProps, prevState). В этом методе вы получите уведомление об изменении состояния. Вызовите там, что вам нужно, когда пользователь достигнет точки.

Больше в документации: https://facebook.github.io/react/docs/react-component.html#componentdidupdate

Answer 2

Вы вставить точку, где вы хотите его видеть (это DOM-элемент).

Таким образом, вы бы что-то, что выглядит следующим образом:

<div> 
    <AnyComponents /> 
    <Waypoint 
    onEnter={() => this.interval = yourInterval} 
    /> 
</div> 

Конечно, вы можете проверить, если уже есть интервал, так что вы не отменяют его. Вы также можете установить реквизиты onLeave на компонент Waypoint. Я предлагаю вам прочитать об этом здесь: https://github.com/brigade/react-waypoint