Я новичок в React и использую React CountUp для анимации подсчета чисел, например:
<CountUp end = {totalAmount} />
Это работает — всякий раз, когда totalAmount
изменяется, CountUp будет анимировать счет от 0 до любого нового числа.
Однако я хочу анимировать его, чтобы он считался от предыдущего числа. Например, если totalAmount
изменится с 70 на 100, я хочу, чтобы анимация просто считала от 70. Как и сейчас, любые изменения totalAmount
всегда будут начинаться с 0.
Я вижу, что есть доступная опора update
, но не знаю, как ее использовать. Я пробовал:
<CountUp end = {totalAmount} update = {totalAmount} />
Я вижу, что есть способ сделать это с помощью «крючка», но, честно говоря, понятия не имею, как включить крючок в мой более широкий компонент React.
Сможет ли кто-нибудь вообще указать мне правильное направление?
🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.
Попробуйте добавить 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}/>
Документация