Je cherche un moyen d'animer un compteur dans React.
Par exemple, j'ai 3 composants de la structure suivante :
(Master est le parent de logicComponent et Counter)
Le composant logique transmet un numéro au composant maître, qui le transmet au composant compteur qui doit effectuer l'animation. Le composant logique envoie des nombres de manière incrémentielle, c'est-à-dire qu'à chaque fois que quelque chose se produit, il envoie une mise à jour.
Par exemple, logicCounter appelle Master dix fois pour incrémenter le compteur, je m'attends à ce que Counter s'affiche 10 fois, affichant 10 nombres. Tout ce que j'ai essayé jusqu'à présent affiche le nombre final (10) sans aucun incrément.
Après avoir cherché une solution, je suis tombé surWindow.requestAnimationFrame()et je cherchais un moyen approprié de l'implémenter dans React.
J'essaie d'éviter d'utiliser des npm/bibliothèques tiers.
J'espère votre aide/idées. Merci.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour les compteurs animés dans React-JS, j'utilise'react-count': un wrapper de composant React configurable autour de "CountUp.js".
Veuillez vous référer à :https://github.com/glennreyes/react-countup. Découvrez la démo en direct :https://tr8tk.csb.app/Étapes :
Installation :
Exemple simple :
import React from 'react'; import { render } from 'react-dom'; import CountUp from 'react-countup'; render(Exemple avancé :
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(