Início / coding / Perguntas / 78946997
Accepted
MeltingDog
Asked: 2024-09-04 13:47:41 +0800 CST

Como faço para que o React CountUp conte a partir de um número anterior?

  • 772

Sou novo no React e estou usando o React CountUp para animar uma contagem crescente de números, por exemplo:

<CountUp end={totalAmount} />

Isso funciona: sempre que totalAmountfor alterado, o CountUp animará uma contagem de 0 até o novo número.

No entanto, quero animá-lo para contar a partir de qualquer que seja o número anterior. Por exemplo, se as totalAmountmudanças forem de 70 para 100, quero que o animado conte apenas a partir de 70. Como está agora, qualquer totalAmountmudança nele sempre começará em 0.

Vejo que há um updateprop disponível, mas não tenho certeza de como usá-lo. Eu tentei:

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

Vejo que há uma maneira de fazer isso em um "gancho", mas, para ser honesto, não tenho ideia de como incorporar um gancho ao meu componente React mais amplo.

Alguém poderia me indicar a direção certa?

javascript

3 respostas

  1. Best Answer

    Tente adicionarpreserveValue={true}

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

    Documentação

    • 3

  2. Use preserveValueo sinalizador booleano. Ele armazena o número finalizado anteriormente para iniciar uma nova animação a partir dele. Verifique o link Npm

    <CountUp preserveValue={true} />
    • 1

  3. Você pode usar a onEndpropriedade callback para atualizar propriedades de acessibilidade e definir o número após o término de cada transição, usando um gancho como este:

    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}/>

    Documentação

    • 1

relate perguntas