reactjs - React 计数动画在页面加载后立即开始，应该在滚动到组件时开始(没有 jquery)

Question

我有一个 react 单页应用程序，具有多个组件。对于第五个组件(仅在向下滚动时可见)，我有一个计数器。现在我正在使用react-countup库来实现计数器功能。然而，计数器在页面加载后立即启动。一旦我们向下滚动到该组件，是否可以开始计数。动画仅在页面加载后发生一次(这很好)，但我希望计数器不要在页面加载后立即开始，而是在用户第一次向下滚动到组件时开始。我的代码如下所示:

    render() {
         return (
         <div className={style.componentName}>
         <h2>Heading</h2>
         <div className={style.col}>
         <div>My counter</div>
         <CountUp className={style.countup} decimals={1} start={0} end={25} suffix=" %" duration={3} />
        </div>
        </div>)}

更新的代码:

    import CountUp, { startAnimation } from 'react-countup';
    import VisibilitySensor from 'react-visibility-sensor';

    class className extends Component {

        state = {
            scrollStatus: true
        };


        onVisibilityChange = isVisible => {
            if (isVisible) {
                if (this.state.scrollStatus) {
                    startAnimation(this.myCountUp);
                    this.setState({ scrollStatus: false });
                }
            }
        }
    render() {
             return (
            <div className={style.componentName}>
             <h2>Heading</h2>
             <VisibilitySensor onChange={this.onVisibilityChange} offset = {{ top: 
              10}} delayedCall>
             <CountUp className={style.countup} decimals={1} start={0} end={25} 
             suffix=" %" duration={3} ref={countUp => { this.myCountUp= countUp;}}/>
             </VisibilitySensor>
            </div>)}
}

Answer 1

自去年以来，API 可能已发生变化。我现在设法使用此代码来完成此工作:

import React from "react";
import CountUp from "react-countup";
import VisibilitySensor from 'react-visibility-sensor';

const MyComponent = () => (
  <>
    <CountUp end={100} redraw={true}>
        {({ countUpRef, start }) => (
            <VisibilitySensor onChange={start} delayedCall>
                <span ref={countUpRef} />
            </VisibilitySensor>
        )}
    </CountUp>
  </>
);

export default App;

我在选项卡内使用此组件，因此 redraw={true} 属性仅用于在 tabChange 上重绘动画。