Cipta kaunter animasi dalam React.js: panduan langkah demi langkah

Question

Saya sedang mencari cara untuk menghidupkan pembilang dalam React.

Sebagai contoh, saya mempunyai 3 komponen struktur berikut:

• Cikgu:
• • Komponen logik
• • Kaunter

(Tuan ialah induk kepada LogicComponent dan Counter)

Komponen logik menghantar nombor kepada komponen induk, yang menghantarnya ke komponen pembilang yang sepatutnya melaksanakan animasi. Komponen logik menghantar nombor secara berperingkat, iaitu, setiap kali sesuatu berlaku, ia menghantar kemas kini.

Sebagai contoh, logicCounter memanggil Master sepuluh kali untuk menambah pembilang, saya menjangkakan Counter akan membuat 10 kali, memaparkan 10 nombor. Semua yang saya cuba setakat ini memaparkan nombor akhir (10) tanpa sebarang kenaikan.

Selepas mencari penyelesaian, saya terjumpa Window.requestAnimationFrame() dan saya sedang mencari cara yang betul untuk melaksanakannya dalam React.

Saya cuba mengelak daripada menggunakan npms/pustaka pihak ke-3.

Mengharap bantuan/idea anda. Terima kasih.

Answer 1

Untuk kaunter animasi dalam React-JS, saya menggunakan 'react-count' : pembalut komponen React yang boleh dikonfigurasikan di sekitar "CountUp.js".

Sila rujuk: https://github.com/glennreyes/react-countup. Lihat demo langsung: https://tr8tk.csb.app/ Langkah-langkah:

Pemasangan:

*npm install react-countup --save*
or
*yarn add react-countup*

Contoh mudah:

import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';

render(
  <CountUp start={0} end={160526} />,
  document.getElementById('root')
);

Contoh lanjutan:

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'),
);