让你的数据值加载动起来！

描述：

数字跳动组件!

CountUp 组件用于展示数字在一定时间内逐渐增加到特定值的动画效果。可以在网页或应用程序中使用，为用户呈现一种动态的数据变化体验。

一、导入组件

npm install react-countup  

二、组件配置介绍

三、 简单使用组件,实际效果

 完整代码：

import CountUp from 'react-countup';
const China = () => {
    return (
        <>
                <div style={{ fontSize: '32px' }}>
                   // 组件使用
                    <CountUp
                        key={1000}
                        // 动画结束值
                        end={9597000}
                        // 保留一位小数
                        decimals={1}
                        // 动画持续时间
                        duration={3}
                        // 动画延迟时间
                        delay={1}
                        // 千位分隔符
                        separator=','
                        // 数据初始值
                        start={0}
                        // 数据前缀
                        prefix='中华人民共和国国土面积：'
                        // 数据后缀
                        suffix='平方公里'
                        // 动画结束回调
                        onEnd={() => {
                            console.log('动画结束');
                        }}
                        // 动画开始回调
                        onStart={() => {
                            console.log('动画开始');
                        }}
                    />
                </div>
        </>
    );
};
export default China;

四、进阶使用 countUpRef 函数来配置使用CountUp 实例方法

        好像该组件目前是不支持 ref 的，所以使用该组件的实例方法还得用 countUpRef 来，，以下简单的举例使用该实例的方法

import { useRef } from 'react';
import CountUp, { useCountUp } from 'react-countup';
const CountUpRef = () => {
    // 定义实例
    const countUpRefs: any = useRef();
    // 定义 重置动画方法和重置初始值方法
    const { start, reset } = useCountUp({
        // 结束值
        end: 20,
        // 前缀
        prefix: '今日温度：',
        // 后缀
        suffix: '°C',
        // 动画持续时间
        duration: 3,
        // 绑定标签
        ref: countUpRefs,
        onEnd: ({ pauseResume, reset, start, update }) => {
            console.log('加载结束');
        }
    });
    return (
        <>
            // 绑定  CountUp 给div
            <div style={{ fontSize: '32px' }} ref={countUpRefs}></div>
           
             // 配置方法 
            <div>
              <button onClick={() => { start();}}>
                    重置动画
              </button>
              <button style={{margin:'0  10px'}} onClick={() => {reset();}} >
                 重置为 0
              </button>
            </div>
        </>
    );
};
export default CountUpRef;

效果图：