Как заставить React CountUp считать от предыдущего числа?

Я новичок в React и использую React CountUp для анимации подсчета чисел, например:

<CountUp end = {totalAmount} />

Это работает — всякий раз, когда totalAmount изменяется, CountUp будет анимировать счет от 0 до любого нового числа.

Однако я хочу анимировать его, чтобы он считался от предыдущего числа. Например, если totalAmount изменится с 70 на 100, я хочу, чтобы анимация просто считала от 70. Как и сейчас, любые изменения totalAmount всегда будут начинаться с 0.

Я вижу, что есть доступная опора update, но не знаю, как ее использовать. Я пробовал:

<CountUp end = {totalAmount} update = {totalAmount} />

Я вижу, что есть способ сделать это с помощью «крючка», но, честно говоря, понятия не имею, как включить крючок в мой более широкий компонент React.

Сможет ли кто-нибудь вообще указать мне правильное направление?

🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.


2
57
3

Ответы:

Решено

Попробуйте добавить preserveValue = {true}

<CountUp end = {totalAmount} preserveValue = {true}/>

Документация


Используйте логический флаг preserveValue. Он сохраняет ранее закончившийся номер, чтобы начать с него новую анимацию. Проверьте ссылку на Npm

<CountUp preserveValue = {true} />

Вы можете использовать функцию обратного вызова onEnd для обновления свойств доступности и установки числа после завершения каждого перехода, используя такой крючок:

const [Current, setCurrent] = React.useState(0); /* make sure you have {useCountUp} imported from countup and its is called */
        
const onEnd = () => {
      setCurrent(totalAmount); /*Whatever you want to do here really*/
};

/*Then set component up like this */
<CountUp end = {totalAmount} start = {Current} onEnd = {onEnd}/>

Документация