Reageer rekwisieten
Props zijn argumenten die worden doorgegeven aan React-componenten.
Props worden via HTML-attributen aan componenten doorgegeven.
propsstaat voor eigenschappen.
Reageer rekwisieten
React Props zijn als functieargumenten in JavaScript en attributen in HTML.
Gebruik dezelfde syntaxis als HTML-attributen om rekwisieten naar een component te sturen:
Voorbeeld
Voeg een kenmerk 'merk' toe aan het element Auto:
const myelement = <Car brand="Ford" />;De component ontvangt het argument als een propsobject:
Voorbeeld
Gebruik het kenmerk merk in de component:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Gecertificeerd!
$95 INSCHRIJVEN
Gegevens doorgeven
Props zijn ook hoe u gegevens van de ene component naar de andere doorgeeft, als parameters.
Voorbeeld
Stuur de eigenschap "merk" van het onderdeel Garage naar het onderdeel Auto:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Als u een variabele wilt verzenden en geen string zoals in het bovenstaande voorbeeld, plaatst u de naam van de variabele gewoon tussen accolades:
Voorbeeld
Maak een variabele met de naam carNameen stuur deze naar de
Carcomponent:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
const carName = "Ford";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Of als het een object was:
Voorbeeld
Maak een object met de naam carInfoen stuur het naar de
Carcomponent:
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
}
function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Opmerking: React Props zijn alleen-lezen! U krijgt een foutmelding als u hun waarde probeert te wijzigen.