我正在尋找一種在 React 中為計數器設定動畫的方法。
為了舉例，我有以下結構的 3 個元件：
（Master是logicComponent和Counter的父級）
邏輯元件將一個數字傳遞給主控元件，主控元件將其傳遞給應該執行動畫的計數器元件。 邏輯元件以增量方式發送數字，也就是說，每次發生某些事情時，它都會發送更新。
例如，logicCounter 呼叫 Master 十次來遞增計數器，我預期 Counter 將渲染 10 次，顯示 10 個數字。 到目前為止我嘗試過的所有方法都顯示了最終數字（10），沒有任何增量。
在尋找解決方案後，我遇到了 Window.requestAnimationFrame()，我正在尋找在 React 中實現它的正確方法。
我試圖避免使用第 3 方 npms/函式庫。
希望得到您的幫助/想法。 謝謝。
對於 React-JS 中的動畫計數器，我使用 'react-count' ：圍繞「CountUp.js」的可設定 React 元件包裝器。
請參考：https://github.com/glennreyes/react-countup。 查看現場示範：https://tr8tk.csb.app/ 步驟：
安裝：
簡單範例：
#import React from 'react'; import { render } from 'react-dom'; import CountUp from 'react-countup'; render( <CountUp start={0} end={160526} />, document.getElementById('root') );進階範例：
#import React from 'react'; import { render } from 'react-dom'; import CountUp from 'react-countup'; const onComplete = () => { console.log('Completed!'); }; const onStart = () => { console.log('Started!'); }; render( <CountUp className="account-balance" start={160527.0127} end={-875.0319} duration={2.75} useEasing={true} useGrouping={true} separator=" " decimals={4} decimal="," prefix="EUR " suffix=" left" onComplete={onComplete} onStart={onStart} />, document.getElementById('root'), );