Skaitītāja komponenta izveide ar rekvizītiem lietojumprogrammā React

Vai esat React lietošanas sākumā un vēlaties saprast, kā pareizi izveidot komponentes un kā starp tām nodot datus, izmantojot rekvizītus? Šajā pamācībā mēs aplūkosim skaitītāja komponenta izveidi React lietojumprogrammā un mācīsimies, kā pielāgot šo komponentu, izmantojot rekvizītus. Tas ir aizraujošs izaicinājums, kas nostiprinās jūsu prasmes darbā ar React.

Galvenās iemaņas

• Rekvizīti ļauj pārsūtīt datus uz React pakārtotajām komponentēm.
• Komponentus var izolēt un padarīt atkārtoti lietojamus.
• Rekvizītus var izmantot, lai inicializētu stāvokli.
• Dinamiskus rekvizītus var izmantot, lai kontrolētu komponentu uzvedību un stāvokli.

Soli pa solim

Solis Nr. 1. Skaitītāja komponenta izveide

Vispirms sāciet, izolējot projektā esošo skaitītāja implementāciju. Jūs vēlaties pārvērst savu skaitītāja pogu par atsevišķu komponentu. Izveidojiet jaunu failu ar nosaukumu CountButton.jsx un sāciet tajā kopēt skaitītāja loģikas galveno kodu.

Pārliecinieties, ka ir eksportēta CountButton galvenā funkcija. Tagad importējiet CountButton lietotnes komponentē.

Ar šo soli jūs iegūsiet atsevišķu komponentu, kas rūpēsies par skaitīšanas funkcijām, padarot jūsu koda struktūru skaidrāku.

Solis Nr. 2: skaitītāja stāvokļa īstenošana

CountButton komponentē tagad ir jāizveido stāvoklis, kas saglabā pašreizējo skaitītāja statusu. Šim nolūkam izmantojiet useState āķi.

Pārliecinieties, ka importējat useState un inicializējat stāvokli ar nulli vai konkrētu vērtību. Tagad poga darbosies saskaņā ar šo loģiku un atjauninās stāvokli, kad uz tās tiks noklikšķināts.

3. solis: Problēmu novēršana

Pirmo reizi testējot pogu, jūs varat sastapties ar kļūdu, piemēram, "State is not defined" (stāvoklis nav definēts). Tas nozīmē, ka esat aizmirsis importēt nepieciešamo stāvokli. Pārbaudiet savu importu un veiciet restartēšanu.

Pēc labošanas jūsu pogai būtu pareizi jāuzskaita un jāuzrāda skaitītāja rādījums.

Solis Nr. 4: Pielāgojiet komponentu, izmantojot rekvizītus.

Jūs vēlaties, lai katra skaitītāja poga varētu strādāt ar dažādām sākotnējām vērtībām un pieaugumiem. Lai to panāktu, izveidojot komponentu CountButton, nododiet rekvizītu ar nosaukumu initialValue un, iespējams, vēl vienu inkrementu.

Šos rekvizītus pēc tam var iestatīt kā atribūtus, kad izmantojat skaitītāja pogu, lai jūs varētu izveidot vienu gadījumu ar sākotnējo vērtību 0 un otru ar 1000.

Solis Nr. 5: Grabple ar vairākiem rekvizītiem

CountButton komponentā tagad jāizmanto pārnestie rekvizīti, lai noteiktu sākotnējo vērtību un pieaugumu. Iestatiet useState inicializāciju ar props.initialValue vērtību.

Pārliecinieties, ka pogā pareizi īstenojat inkrementēšanu, lai skaitītājs tiktu palielināts par vērtību, kas tam piešķirta ar rekvizītu.

Solis 6: Pārbaudi izmaiņas

Pēc šo pielāgojumu veikšanas pārbaudiet savas pogas, lai pārliecinātos, vai tās visas skaita neatkarīgi. Katrai pogai jābūt savam stāvoklim, pamatojoties uz tai nodoto rekvizītu.

Lai pārliecinātos, ka viss darbojas, vairākas reizes pārlādējiet lapu no jauna un pārbaudiet, vai skaitītāji lēkā atpakaļ uz savām sākotnējām vērtībām.

7. solis: Dinamiskie rekvizīti (turpmākajās pamācībās)

Atcerieties, ka rekvizīti, kas tiek piešķirti, izveidojot komponentu, ir statiski. Kādā no nākamajām nodarbībām uzzināsiet, kā dinamiski mainīt rekvizītus, lai radītu interaktīvāku lietotāja pieredzi.

Tātad esat ne tikai iemācījušies, kā lietot rekvizītus React lietojumprogrammā, bet arī kā izveidot savu skaitītāja komponenti, kas ir pielāgojama.

Kopsavilkums

Šajā pamācībā jūs uzzinājāt, kā izveidot atsevišķu skaitītāja komponentu un inicializēt to ar rekvizītiem. Jūs uzzinājāt, kā kopā izmantot stāvokli un rekvizītus, lai pielāgotu un uzlabotu React komponentu funkcionalitāti. Šīs zināšanas ir būtiskas, lai izprastu React komponentes un to mijiedarbību.