Passare Props ad un Componente

Props familiari

Le props sono le informazioni che passi ad un tag JSX. Ad esempio, className, src, alt, width e height sono alcune delle props che puoi passare ad un <img>:

Le props che puoi passare ad un tag <img> sono predefinite (ReactDOM si conforma allo standard HTML). Ma puoi passare qualsiasi props ai tuoi componenti, come <Avatar>, per personalizzarli. Ecco come!

Passare props ad un componente

In questo codice, il componente Profile non sta passando alcuna props al suo componente figlio, Avatar:

export default function Profile() {
  return (
    <Avatar />
  );
}

Puoi dare ad Avatar delle props in due passaggi.

Step 1: Passa le props al componente figlio

Prima di tutto, passa alcune props ad Avatar. Ad esempio, passiamo due props: person (un oggetto) e size (un numero):

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

Adesso puoi leggere queste props all’interno del componente Avatar.

Step 2: Leggi le props all’interno del componente figlio

Puoi leggere queste props elencando i loro nomi person, size separati da virgole all’interno di ({ e }) direttamente dopo function Avatar. Questo ti permette di usarle all’interno del codice di Avatar, come faresti con una variabile.

function Avatar({ person, size }) {
  // person e size sono disponibili qui
}

Aggiungi della logica ad Avatar che usa le props person e size per il rendering, ed è fatta.

Adesso puoi configurare Avatar per farlo renderizzare in molti modi diversi con props diverse. Prova a modificare i valori!

Le props ti fanno pensare ai componenti genitori e figli in maniera indipendente. Ad esempio, puoi cambiare le props person o size all’interno di Profile senza dover pensare a come Avatar le utilizza. In maniera simile, puoi cambiare come Avatar usa queste props, senza guardare Profile.

Puoi pensare alle props come a delle “rotelle” che puoi regolare. Servono allo stesso scopo degli argomenti per le funzioni-infatti, le props sono l’unico argomento per il tuo componente! Le funzioni dei componenti React accettano un singolo argomento, un oggetto props:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Solitamente non hai bisogno dell’intero oggetto props in sé, quindi lo destrutturi in props individuali.

function Avatar({ person, size }) {
  // ...
}

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Specificare un valore di default per una prop

Se vuoi dare a una prop un valore di default da utilizzare quando non viene specificato alcun valore, puoi farlo tramite il destructuring mettendo = ed il valore di default subito dopo il parametro:

function Avatar({ person, size = 100 }) {
  // ...
}

Adesso, se <Avatar person={...} /> viene renderizzato senza la prop size, il size verrà impostato a 100.

Il valore di default è utilizzato solo se la prop è mancante o se passi size={undefined}. Ma se passi size={null} o size={0}, il valore di default non verrà utilizzato.

Inoltrare props con la sintassi di spread JSX

Qualche volta, passare le props diventa molto ripetitivo:

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

Non c’è nulla di sbagliato nel codice ripetitivo-può essere più leggibile. Ma a volte puoi preferire la concisione. Alcuni componenti inoltrano tutte le loro props ai loro figli, come fa questo Profile con Avatar. Poiché non utilizzano direttamente nessuna delle loro props, può avere senso utilizzare una sintassi più concisa, chiamata “spread”:

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

Questo inoltra tutte le props di Profile all’Avatar senza elencare i loro nomi.

Utilizza la sintassi di spread con moderazione. Se la utilizzi in ogni componente, probabilmente c’è qualcosa che non va. Spesso, questo indica che dovresti suddividere i tuoi componenti e passare i figli come JSX. Ne parleremo dopo!

Passare JSX come figlio

È comune annidare tag del browser incorporati:

<div>
  <img />
</div>

Qualche volta vorrai annidare i tuoi componenti allo stesso modo:

<Card>
  <Avatar />
</Card>

Quando annidi del contenuto all’interno di un tag JSX, il componente genitore riceverà quel contenuto in una prop chiamata children. Ad esempio, il componente Card qui sotto riceverà una prop children impostata ad <Avatar /> e la renderizzerà in un div contenitore:

Prova a sostituire l’<Avatar> all’interno di <Card> con del testo per vedere come il componente Card può avvolgere qualsiasi contenuto annidato. Non ha bisogno di “sapere” cosa viene renderizzato al suo interno. Vedrai questo modello flessibile in molti punti.

Puoi pensare a un componente con una prop children come ad avere un “buco” che può essere “riempito” dai suoi componenti genitori con JSX arbitrario. Spesso utilizzerai la prop children per i contenitori visivi: pannelli, griglie, ecc.

Come cambiano le props nel tempo

Il componente Clock qui sotto riceve due props dal suo componente genitore: color e time. (Il codice del componente genitore viene omesso perché utilizza state, che al momento non approfondiremo ancora.)

Prova a cambiare il colore nella casella di selezione qui sotto:

Questo esempio illustra che un componente può ricevere props diverse nel tempo. Le props non sono sempre statiche! Qui, la prop time cambia ogni secondo e la prop color cambia quando selezioni un altro colore. Le props riflettono i dati di un componente in un determinato momento, invece che solo all’inizio.

Tuttavia, le props sono immutabili—un termine della scienza informatica che significa “non modificabile”. Quando un componente ha bisogno di cambiare le sue props (ad esempio, in risposta a un’interazione dell’utente o a nuovi dati), dovrà “chiedere” al suo componente genitore di passargli props diverse—un nuovo oggetto! Le sue vecchie props verranno quindi scartate ed alla fine il motore JavaScript reclamerà la memoria occupata da esse.

Non provare a “cambiare le props”. Quando hai bisogno di rispondere all’input dell’utente (come cambiare il colore selezionato), dovrai “impostare lo state”, che puoi imparare in State: La Memoria di un Componente.