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 propsoggetto:

Esempio

Utilizza l'attributo del marchio nel componente:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}


w3schools CERTIFIED . 2022

Ottieni la certificazione!

Completa i moduli React, fai gli esercizi, fai l'esame e diventa certificato w3schools!!

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 carNamee inviala al Carcomponente:

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 carInfoe invialo al Carcomponente:

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.


Mettiti alla prova con gli esercizi

Esercizio:

Crea una variabile denominata name e passala al componente Messaggio.

function Person(props) {
  return <h2>I'm { props.name }!</h2>;
}

function Greeting() {
  const name = "Jesse"
  return (
    <>
      <h1>Hello!</h1>
      <Person name= name  />
    </>
  );
}

ReactDOM.render(<Greeting />, document.getElementById('root'));