Skaitiklio komponento kūrimas naudojant "React" rekvizitus

Pradedate savo kelionę su "React" ir norite suprasti, kaip tinkamai kurti komponentus ir kaip perduoti duomenis tarp jų naudojant rekvizitus? Šioje pamokoje aptarsime skaitiklio komponento sukūrimą "React" programoje ir sužinosime, kaip pritaikyti šį komponentą naudojant rekvizitus. Tai įdomus iššūkis, kuris sustiprins jūsų darbo su "React" įgūdžius.

Pagrindinės žinios

• Rekvizitai leidžia perduoti duomenis į "React" antrinius komponentus.
• Komponentus galima izoliuoti ir padaryti juos daugkartinio naudojimo.
• Rekvizitai gali būti naudojami būsenai inicializuoti.
• Dinaminiai rekvizitai gali būti naudojami komponentų elgsenai ir būsenai valdyti.

Žingsnis po žingsnio

1 veiksmas. Skaitiklio komponento sukūrimas

Pirmiausia pradėkite nuo esamo skaitiklio įgyvendinimo jūsų projekte izoliavimo. Savo skaitiklio mygtuką norite paversti atskiru komponentu. Sukurkite naują failą pavadinimu CountButton.jsx ir pradėkite į jį kopijuoti pagrindinį savo skaitiklio logikos kodą.

Būtinai eksportuokite pagrindinę CountButton funkciją. Dabar importuokite CountButton į programos komponentą.

Atlikę šį veiksmą gausite atskirą komponentą, kuris rūpinsis skaičiavimo funkcijomis, todėl jūsų kodo struktūra taps aiškesnė.

2 žingsnis: skaitiklio būsenos įgyvendinimas

CountButton komponente dabar reikia sukurti būseną, kuri išsaugotų dabartinę skaitiklio būseną. Tam naudojate kabliuką useState.

Įsitikinkite, kad importuojate useState ir inicializuojate būseną nuliu arba konkrečia verte. Dabar jūsų mygtukas vadovausis šia logika ir atnaujins būseną paspaudus.

3 žingsnis: trikčių šalinimas

Pirmą kartą bandydami mygtuką galite susidurti su klaida, pavyzdžiui, "state is not defined" (būsena neapibrėžta). Tai reiškia, kad pamiršote importuoti reikiamą būseną. Patikrinkite importą ir atlikite pakartotinį paleidimą.

Ištaisius, jūsų mygtukas turėtų būti teisingai suskaičiuotas ir rodomas skaitiklio rodmuo.

4 veiksmas: pritaikykite komponentą naudodami rekvizitus

Norite, kad kiekvienas skaitiklio mygtukas galėtų veikti su skirtingomis pradinėmis vertėmis ir prieaugiais. Norėdami tai pasiekti, kurdami komponentą CountButton perduokite rekvizitą, pavadintą initialValue, ir galbūt dar vieną inkrementą.

Tada šiuos rekvizitus galima nustatyti kaip atributus naudojant skaitiklio mygtuką, kad būtų galima sukurti vieną egzempliorių su pradine verte 0, o kitą - su 1000.

5 veiksmas: griebtis kelių rekvizitų

Komponente CountButton dabar turite naudoti perkeltus rekvizitus, kad nustatytumėte pradinę vertę ir prieaugį. Nustatykite inicializaciją useState su verte props.initialValue.

Įsitikinkite, kad mygtuke teisingai įgyvendinote inkrementą, kad skaitiklis būtų didinamas pagal rekvizito jam priskirtą reikšmę.

6 veiksmas: išbandykite pakeitimą

Atlikę šiuos pakeitimus, išbandykite mygtukus, kad įsitikintumėte, ar visi jie skaičiuoja nepriklausomai. Kiekvienas mygtukas turėtų turėti savo būseną, pagrįstą jam perduotais rekvizitais.

Norėdami įsitikinti, kad viskas veikia, kelis kartus perkraukite puslapį ir patikrinkite, ar skaitikliai peršoka į pradines vertes.

7 veiksmas: Dinaminiai rekvizitai (būsimuose vadovėliuose)

Nepamirškite, kad rekvizitai, kurie priskiriami kuriant komponentą, yra statiški. Vėlesniame užsiėmime sužinosite, kaip dinamiškai keisti rekvizitus, kad sukurtumėte interaktyvesnę naudotojo patirtį.

Taigi išmokote ne tik naudoti rekvizitus "React" programoje, bet ir sukurti savo skaitiklio komponentą, kurį galima pritaikyti.

Apibendrinimas

Šioje pamokoje sužinojote, kaip sukurti atskirą skaitiklio komponentą ir inicializuoti jį su rekvizitais. Sužinojote, kaip kartu naudoti būseną ir rekvizitus, kad pritaikytumėte ir pagerintumėte "React" komponentų funkcionalumą. Šios žinios yra esminės norint suprasti "React" komponentus ir jų sąveiką.