Datan Välittäminen Propseilla
Komponenttien täytyy usein näyttää 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 alakomponentille 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 tiedoilla, jolloin saadaan erilainen käyttöliittymä.
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ä.
Propsit ovat vain luettavissa. Komponentin ei tulisi muuttaa saamiaan propseja. Niiden tarkoitus on ohjata, miltä komponentti näyttää tai miten se käyttäytyy ulkoisen tiedon perusteella.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Mahtavaa!
Completion arvosana parantunut arvoon 4Datan Välittäminen Propseilla
Pyyhkäise näyttääksesi valikon
Komponenttien täytyy usein näyttää 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 alakomponentille 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 tiedoilla, jolloin saadaan erilainen käyttöliittymä.
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ä.
Propsit ovat vain luettavissa. Komponentin ei tulisi muuttaa saamiaan propseja. Niiden tarkoitus on ohjata, miltä komponentti näyttää tai miten se käyttäytyy ulkoisen tiedon perusteella.
Kiitos palautteestasi!
