React-komponentille välitettävät parametrit, joilla annat sille dataa ja toiminnallisuutta ulkoapäin. Props ovat read-only eli niitä ei muuteta komponentin sisällä, mikä tekee koodista ennustettavampaa.
Properties · Koodaus
Props (properties) ovat Reactin tapa välittää dataa yläkomponentilta alakomponentille, samaan tapaan kuin funktion parametrit. Kun käytät komponenttia, kirjoitat propsit sen tagiin attribuuttien tapaan, esimerkiksi label="Tallenna". Komponentti saa ne käyttöönsä yhtenä objektina. Props ovat aina read-only: komponentti voi lukea saamansa arvot mutta ei muuttaa niitä. Se tekee datan kulusta ennustettavan, koska tieto kulkee aina ylhäältä alaspäin. Voit pyytää tekoälyä selittämään jokaisen propsin tarkoituksen, jos komponentti tuntuu vaikealta lukea.
Props eroaa tilasta (state) siinä, että state on komponentin oma sisäinen muistiosa, jota komponentti päivittää itse. Props tulevat aina ulkopuolelta. Käytännössä propsien avulla sama komponentti toimii eri datalla: yksi Button-komponentti näyttää tekstin "Tallenna" tai "Peruuta" label-propsin mukaan, ja yksi ProductCard näyttää minkä tahansa tuotteen. Claude Code, Cursor ja Lovable jakavat käyttöliittymän juuri tällä tavalla pieniin komponentteihin, joten propseja on lähes jokaisessa tekoälyn tuottamassa React-tiedostossa. Jos komponentti saa yli kuusi tai seitsemän propsia, se on usein merkki siitä, että se tekee liikaa ja kannattaa jakaa pienemmiksi osiksi.
Kun luet tekoälyn tuottamaa koodia, katso ensin komponentin propsien määrittely. Se kertoo, mitä dataa komponentti odottaa. TypeScriptissä propsit tyypitetään interfacella tai type-määrittelyllä, ja editori huomauttaa heti, jos annat väärän tyyppisen arvon tai jätät pakollisen propsin pois. Yleinen virhe on yrittää muuttaa propsia komponentin sisällä, esimerkiksi lisäämällä listaan alkio suoraan props.items-taulukkoon. Korjaus on kopioida arvo omaan stateen tai välittää yläkomponentilta funktio, joka päivittää alkuperäisen datan. Nimeä propsit kuvaavasti, esimerkiksi isLoading tai onSave. Hyvät nimet auttavat sinua ja tekoälyä ymmärtämään komponentin tarkoituksen ilman erillistä selitystä, ja ne tekevät seuraavista pyynnöistä tarkempia.
Props ja komponentti kuuluvat yhteen: komponentti on rakennuspalikka ja props sen asetukset. State ja props yhdessä määräävät, mitä ruudulla näkyy.
<Button label="Tallenna" onClick={save} variant="primary" />
function UserCard({ name, email, avatar }: UserProps) { ... }
props.children sisältää lapsikomponentit, esim. <Layout>{children}</Layout>
<BlogPost title={post.title} date={post.date} content={post.body} />
Spread-syntaksi: <Component {...props} /> välittää kaikki propsit kerralla
interface UserProps { name: string; email: string; avatar?: string } tyypittää propsit ja merkitsee avatarin valinnaiseksi
Tutustu kaikkiin vibekoodauksen termeihin.