Props-ominaisuudet ja koostaminen
Välittäkää props-ominaisuuksia, määrittäkää oletusarvoja destructuringilla, verratkaa koostamista ja perintää, tutustukaa children- ja slots-malleihin sekä yksinkertaisiin presentational-komponentteihin.
Props-ominaisuudet ja koostaminen on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 3 oppituntia.
Yleiskatsaus
Tavoite: välitä tietoja propsien avulla, määritä oletusarvot ja rakenna käyttöliittymiä koostamalla pieniä komponentteja.
- Propsit välittävät tietoja komponentteihin.
- Oletusarvot määritetään yksinkertaisella destrukturoinnilla.
- Koostaminen ja children-slotit.
Propsien välittäminen
Propsit ovat vain luku -syötteitä. Vanhempi renderöi lapsen ja antaa sille arvoja; lapsi lukee ne parametreistaan.
- Älä muuta propseja.
- Uudelleenrenderöinti tapahtuu, kun vanhempi muuttaa tilaansa tai propsejaan.
Propsien oletusarvot (yksinkertainen tapa)
Anna propseille oletusarvot destrukturoimalla ne parametriluettelossa: function Card({ title = "Untitled" }).
- Komponentit pysyvät toimintavarmoina.
- Merkintäkoodiin ei tarvita undefined-tarkistuksia.
Koostaminen, ei perintä
Koostaminen tarkoittaa suurempien käyttöliittymien rakentamista pienemmistä osista (children/slotit). Suosi sitä perinnän sijaan, koska se tarjoaa joustavuutta ja pitää tietovirran selkeänä.
Esimerkki: propsit ja children
Esimerkki: välitä propseja, määritä oletusarvot ja kokoa children-sisältö yksinkertaisen korttiasettelun sisään.
<div id="root"></div>
Uudelleenkäytettävä esityskomponentti
Esityskomponentit keskittyvät asetteluun ja visuaaliseen ilmeeseen; pidä ne mahdollisuuksien mukaan props-ohjattuina ja tilattomina, jotta niitä on helppo käyttää uudelleen.
- Pieni rajapinta (vain propsit).
- Tyylit määritetään luokilla; vältä piilotettuja sivuvaikutuksia.
Koostaminen vai perintä
Kertaus
Kertaus: välitä tietoja propsien avulla, määritä turvalliset oletusarvot ja kokoa children-sisältöä joustavien, uudelleenkäytettävien käyttöliittymien rakentamiseksi; vältä perintään perustuvia hierarkioita.
Opi React tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 88
- Oppitunnit
- 324
Usein kysytyt kysymykset
Onko oppitunti ”Props-ominaisuudet ja koostaminen” ilmainen?
Kyllä – oppitunnin ”Props-ominaisuudet ja koostaminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”Props-ominaisuudet ja koostaminen”?
Välittäkää props-ominaisuuksia, määrittäkää oletusarvoja destructuringilla, verratkaa koostamista ja perintää, tutustukaa children- ja slots-malleihin sekä yksinkertaisiin presentational-komponenttei… Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/3.
Kuinka kauan ”Props-ominaisuudet ja koostaminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?
Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Props-ominaisuuksien välitys ja koostamismallit
- Props-ominaisuudet ja koostaminen
- Uudelleenkäytettävät presentational-komponentit