Reactissa propsit (lyhenne sanasta properties) ovat tehokas mekanismi, jolla voidaan mukauttaa ja välittää tietoa vanhemmalta lapsikomponentille. Tämän ominaisuuden avulla voimme luoda uudelleenkäytettäviä ja joustavia komponentteja sovellukseen.

Propsien välittäminen

Kuvitellaan, että rakennamme verkkokauppaa.

Tässä tilanteessa meillä on pääkomponentti nimeltä App, ja haluamme näyttää tuotetietoja Product-komponentin avulla. Voimme välittää tuotteen nimen ja hinnan propseina App-komponentista Product-komponentille.

Näin se tehdään käytännössä:

// Parent Component (`App`)
const App = () => (
  <>
    <h1>Online Store</h1>
    <Product name="Green iguana" price={579} />
  </>
);

App-komponentissa sisällytetään Product-komponentti ja sille välitetään propsit: name arvolla "Green iguana" ja price arvolla 579.

Propsien vastaanottaminen ja käyttö

Tarkastellaan nyt Product-komponenttia, joka vastaanottaa nämä propsit:

// Child Component (`Product`)
const Product = (props) => (
  <>
    <p>Product name: {props.name}</p>
    <p>Price: ${props.price}</p>
  </>
);

Product-komponentissa määritellään yksi argumentti nimeltä props. Komponentin sisällä näiden propsien arvot voidaan hakea piste (.) -notaatioilla ja ominaisuuden nimellä (esim. props.name ja props.price).

Käytännön sovellus

Tällä lähestymistavalla on luotu Product-komponentti, jota voidaan käyttää uudelleen eri tuotetiedoilla useita kertoja. Jokaisen Product-komponentin tekstisisältöä voidaan helposti mukauttaa antamalla eri propsit.

<Product name="Yellow cheetah" price={1099} />
<Product name="Panda" price={449} />

Nyt voidaan joustavasti näyttää erilaisia tuotetietoja saman Product-komponentin avulla.

Koko sovelluksen koodi: