CountUp基本使用

        <CountUp
        // 动画结束值
        end={9999}
        // 保留一位小数
        decimals={1}
        // 动画持续时间
        duration={3}
        // 动画延迟时间
        delay={1}
        // 千位分隔符
        separator=','
        // 数据初始值
        start={0}
        // 数据前缀
        prefix='中华人民共和国国土面积：'
        // 数据后缀
        suffix='平方公里'
        // 动画结束回调
        onEnd={() => {
            console.log('动画结束');
        }}
        // 动画开始回调
        onStart={() => {
            console.log('动画开始');
        }}
    />

import { useState } from 'react';
import styles from './style.less'

import CountUp from 'react-countup';
const index = () => {
    const [numbers, setNumbers] = useState([1, 2, 3]); // 初始数组



    return (
        <div>

            <div className={styles.countUpContainer} >
                {numbers.map((item: any, index) => {
                    return (
                        <div key={index} className={styles.countCore}>
                            <div className={styles.countBgd} style={{ padding: '2px 5px' }}>
                                {/* <span key={index} style={{ fontSize: '32px' }} ref={(e: any) => e && countRef.current.push(e)}></span> */}
                                <CountUp end={item} />
                            </div>

                        </div>

                    )
                })}
            </div>

            <button onClick={() => { setNumbers([...numbers, 1]) }}>添加</button>
        </div >
    );
}

export default index;

import { useRef } from 'react';
import { useCountUp } from 'react-countup';
const index = () => {
    const countUpRef = useRef();
    const { start, reset } = useCountUp({
        end: 876,
        prefix: '鹿邑县',
        suffix: '公里',
        duration: 3,
        ref: countUpRef,
        onEnd: ({ pauseResume, reset, start, update }) => {
            console.log('加载结束');
        }
    });
    return (
        <div>
            {/* 绑定实例 */}
            <div style={{ fontSize: '32px' }} ref={countUpRef}></div>

            <button onClick={() => { start(); }}>
                重置动画
            </button>
            <button onClick={() => { reset(); }} >
                重置为 0
            </button>
        </div>
    );
};
export default index;