Datan Välittäminen Propseilla

Komponenttien on usein näytettävä eri tietoja riippuen siitä, missä niitä käytetään. Reactissa tietoa välitetään komponentteihin propseilla. Propsit ovat komponentin syötteitä. Niiden avulla voit lähettää tietoa yläkomponentista alakomponenttiin ja hallita, mitä komponentti näyttää.

Sen sijaan, että arvot kovakoodattaisiin komponenttiin, propsit tekevät komponenteista uudelleenkäytettäviä. Sama komponentti voidaan käyttää useita kertoja eri tiedoilla, jolloin käyttöliittymä muuttuu tiedon mukaan.

Alla on yksinkertainen esimerkki tiedon välittämisestä komponentille propseilla:

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 tiedon ja näyttää sen käyttöliittymässä.