Datan Välittäminen Propseilla

Komponenttien täytyy usein näyttää erilaista dataa riippuen siitä, missä niitä käytetään. Reactissa data välitetään komponentteihin propseina. Propsit ovat komponentin syötteitä. Niiden avulla voit lähettää dataa yläkomponentista alakomponenttiin ja hallita, mitä komponentti näyttää.

Sen sijaan, että arvot kovakoodattaisiin komponentin sisälle, propsit tekevät komponenteista uudelleenkäytettäviä. Samaa komponenttia voidaan käyttää useita kertoja eri datalla, jolloin saadaan erilainen käyttöliittymä.

Alla on yksinkertainen esimerkki datan välittämisestä komponentille propsien avulla:

function Greeting(props) {
  return <h2>Hello, {props.name}</h2>;
}

function App() {
  return <Greeting name="Olivia" />;
}

Tässä esimerkissä App-komponentti välittää arvon "Olivia" Greeting-komponentille propilla nimeltä name. Greeting-komponentti vastaanottaa tämän datan ja näyttää sen käyttöliittymässä.