Reageer Props
Rekwisiete is argumente wat in React-komponente oorgedra word.
Rekwisiete word deur HTML-kenmerke aan komponente oorgedra.
props staan vir eiendomme.
Reageer Props
React Props is soos funksie-argumente in JavaScript en eienskappe in HTML.
Om rekwisiete in 'n komponent te stuur, gebruik dieselfde sintaksis as HTML-kenmerke:
Voorbeeld
Voeg 'n "brand"-kenmerk by die Car-element:
const myelement = <Car brand="Ford" />;Die komponent ontvang die argument as 'n propsobjek:
Voorbeeld
Gebruik die handelsmerkkenmerk in die komponent:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Word gesertifiseer!
$ 95 INSKRYF
Slaag data
Rekwisiete is ook hoe jy data van een komponent na 'n ander deurgee, as parameters.
Voorbeeld
Stuur die "handelsmerk"-eienskap vanaf die Garage-komponent na die Motor-komponent:
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'));
As jy 'n veranderlike het om te stuur, en nie 'n string soos in die voorbeeld hierbo nie, plaas jy net die veranderlike naam tussen krullerige hakies:
Voorbeeld
Skep 'n veranderlike met die naam carNameen stuur dit na die
Carkomponent:
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 as dit 'n voorwerp was:
Voorbeeld
Skep 'n voorwerp met die naam carInfoen stuur dit na die
Carkomponent:
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'));
Let wel: React Props is leesalleen! Jy sal 'n fout kry as jy probeer om hul waarde te verander.