Properties · Koodaus
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.
Props (properties) ovat Reactin tapa välittää dataa yläkomponentilta alakomponentille — kuin funktion parametrit. Props ovat aina read-only: komponentti voi lukea saamansa propsit mutta ei muuttaa niitä, mikä tekee datan kulusta ennustettavan. Tämä eroaa statesta, joka on komponentin omaa sisäistä tilaa jonka komponentti voi itse päivittää. Propsien avulla sama komponentti toimii eri datalla: esimerkiksi yksi Button-komponentti voi näyttää "Tallenna" tai "Peruuta" label-propsin mukaan. TypeScriptin kanssa propsit tyypitetään interfacella, jolloin tekoäly ja editori osaavat ehdottaa oikeita arvoja automaattisesti.
<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
Tutustu kaikkiin vibekoodauksen termeihin.