reactjs - 当用户滚动到时，如何让 React CountUp 真正运行？

Question

我使用 React CountUp，但是当页面加载时，CountUp 无论如何都会计数，这导致当我真正滚动到包含 CountUp 的部分时没有动画。当用户真正滚动到该部分时，我应该如何使 CountUp 仅计数？

export const Statistics = () => {
    


    return (
        <section id="counter" class="section-padding">
            <div class="overlay dark-overlay"></div>
            <Container>
                <Row>
                    <Col lg={3} sm={6} md={6}>
                        <div className="counter-stat">
                            <Icofont icon="heart"></Icofont>
                            <CountUp className="counter" duration={1} start={0} end={460}/>
                            <h5>Our Happy Clients</h5>
                        </div>
                    </Col>
                    <Col lg={3} sm={6} md={6}>
                        <div className="counter-stat">
                            <Icofont icon="rocket"></Icofont>
                            <CountUp className="counter" duration={1} start={0} end={60}/>
                            <h5>Projects Done</h5>
                        </div>
                    </Col>
                    <Col lg={3} sm={6} md={6}>
                        <div className="counter-stat">
                            <Icofont icon="hand-power"></Icofont>
                            <CountUp className="counter" duration={1} end={30}/>
                            <h5>Experienced stuff</h5>
                        </div>
                    </Col>
                    <Col lg={3} sm={6} md={6}>
                        <div className="counter-stat">
                            <Icofont icon="shield-alt"></Icofont>
                            <CountUp className="counter" duration={1} end={20}/>
                            <h5>Ongoing project</h5>
                        </div>
                    </Col>
                    
                </Row>
            </Container>

        </section>
    )
}

标签： reactjs