Överföra Data med Props
Komponenter behöver ofta visa olika data beroende på var de används. I React skickas data in i komponenter med hjälp av props. Props är indata till en komponent. De möjliggör att skicka data från en föräldrakomponent till en barnkomponent och styr vad komponenten visar.
Istället för att hårdkoda värden i en komponent, gör props komponenter återanvändbara. Samma komponent kan användas flera gånger med olika data och generera olika UI-resultat.
Nedan finns ett enkelt exempel på att skicka data till en komponent med props:
function Greeting(props) {
return <h2>Hello, {props.name}</h2>;
}
function App() {
return <Greeting name="Olivia" />;
}
I detta exempel skickar App-komponenten värdet "Olivia" till Greeting-komponenten med en prop som heter name. Greeting-komponenten tar emot denna data och visar den i användargränssnittet.
Props är skrivskyddade. En komponent ska inte ändra de props den tar emot. Deras syfte är att styra hur en komponent ser ut eller beter sig baserat på extern data.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Fantastiskt!
Completion betyg förbättrat till 4Överföra Data med Props
Svep för att visa menyn
Komponenter behöver ofta visa olika data beroende på var de används. I React skickas data in i komponenter med hjälp av props. Props är indata till en komponent. De möjliggör att skicka data från en föräldrakomponent till en barnkomponent och styr vad komponenten visar.
Istället för att hårdkoda värden i en komponent, gör props komponenter återanvändbara. Samma komponent kan användas flera gånger med olika data och generera olika UI-resultat.
Nedan finns ett enkelt exempel på att skicka data till en komponent med props:
function Greeting(props) {
return <h2>Hello, {props.name}</h2>;
}
function App() {
return <Greeting name="Olivia" />;
}
I detta exempel skickar App-komponenten värdet "Olivia" till Greeting-komponenten med en prop som heter name. Greeting-komponenten tar emot denna data och visar den i användargränssnittet.
Props är skrivskyddade. En komponent ska inte ändra de props den tar emot. Deras syfte är att styra hur en komponent ser ut eller beter sig baserat på extern data.
Tack för dina kommentarer!
