Reagire Props
I prop sono argomenti passati ai componenti di React.
I prop vengono passati ai componenti tramite attributi HTML.
props
sta per proprietà.
Reagire Props
React Props sono come argomenti di funzione in JavaScript e attributi in HTML.
Per inviare oggetti di scena in un componente, usa la stessa sintassi degli attributi HTML:
Esempio
Aggiungi un attributo "brand" all'elemento Car:
const myelement = <Car brand="Ford" />;
Il componente riceve l'argomento come props
oggetto:
Esempio
Utilizza l'attributo del marchio nel componente:
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Ottieni la certificazione!
ISCRIVITI A $95
Passa dati
Gli oggetti di scena sono anche il modo in cui si passano i dati da un componente all'altro, come parametri.
Esempio
Invia la proprietà "brand" dal componente Garage al componente 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'));
Se hai una variabile da inviare e non una stringa come nell'esempio sopra, metti semplicemente il nome della variabile tra parentesi graffe:
Esempio
Crea una variabile denominata carName
e inviala al
Car
componente:
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'));
O se fosse un oggetto:
Esempio
Crea un oggetto denominato carInfo
e invialo al
Car
componente:
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'));
Nota: i React Props sono di sola lettura! Riceverai un errore se provi a modificarne il valore.