Le props sono gli input di un componente React. Un genitore le passa come attributi in JSX, <UserCard name="Ada" online={true} />, e il figlio le riceve come un unico oggetto, che di solito destrutturi nei parametri della funzione. Le props permettono a un componente di mostrare dati diversi ogni volta che lo usi.
Lo stesso UserCard renderizza tre persone diverse. Nota l'ultima: un attributo senza valore, online, significa online={true}. Aggiungi una quarta card con il tuo nome e il tuo ruolo.
Passare e leggere le props
Passa una stringa tra virgolette e qualsiasi altro valore tra parentesi graffe: numeri, booleani, array, oggetti, funzioni, persino JSX.
<Product
title="Desk lamp"
price={39.5}
inStock={false}
tags={['light', 'office']}
seller={{ name: 'Lumen', rating: 4.8 }}
/>
React raccoglie tutti gli attributi in un oggetto e lo passa come primo argomento del componente. Puoi leggerlo come props, oppure estrarre i campi che ti servono direttamente nella lista dei parametri:
function Product(props) {
return <h3>{props.title}</h3>;
}
function Product({ title, price, seller }) {
return <h3>{title}, ${price} from {seller.name}</h3>;
}
Entrambe le versioni ricevono lo stesso oggetto. La destrutturazione è lo stile più comune perché la firma della funzione elenca esattamente quali props usa il componente.
Valori predefiniti
Dai a una prop un valore predefinito con il default della destrutturazione di JavaScript, = value. Si applica quando il genitore omette la prop, o passa undefined. Non si applica a null, 0, false o '', che sono valori veri e propri.
I primi tre pulsanti ricadono sui valori predefiniti dove una prop manca o è undefined. L'ultimo passa null, quindi size è davvero null, e la ricerca non trova alcun padding. Cambia size={null} in size="small" per sistemarlo.
Il codice più vecchio imposta i valori predefiniti con una proprietà statica, Button.defaultProps = { size: 'medium' }. React 19 ha rimosso defaultProps per i function component: JSX lo ignora su una funzione, senza alcun avviso. Funziona ancora sui class component. Usa i valori predefiniti della destrutturazione.
Passare funzioni come props
I dati scorrono verso il basso: un genitore passa props ai suoi figli, mai il contrario. Quando un figlio deve dire al genitore che è successo qualcosa, il genitore passa una funzione e il figlio la chiama. Per convenzione queste props si chiamano onSomething.
Rating non memorizza nulla. Mostra il value che riceve e segnala i clic tramite onRate. Lo stato vive in App, che lo ripassa verso il basso. Passa direttamente onRate={setRating} al posto di handleRate e funziona lo stesso: anche un setter è una funzione. Spostare lo stato in un genitore comune in questo modo si chiama sollevare lo stato.
Lo spread delle props
Quando hai già un oggetto le cui chiavi corrispondono alle props di un componente, usa lo spread {...object} invece di scrivere ogni attributo. La sintassi rest fa il contrario nella lista dei parametri: prende alcune props per nome, raccoglie tutto il resto e lo inoltra.
Il secondo avatar fa lo spread di person e poi imposta color: quando la stessa prop compare due volte vince l'ultima, quindi metti le sovrascritture dopo lo spread. TextField tiene label per sé e passa type, placeholder e maxLength direttamente all'<input>. Usa lo spread per wrapper come questo; altrove, elencare le props in modo esplicito rende più facile vedere cosa riceve un componente.
Le props sono di sola lettura
Un componente non deve mai cambiare le proprie props. Appartengono al genitore, e lo stesso oggetto potrebbe essere condiviso. Trattale come argomenti di funzione che non puoi riassegnare:
function Counter({ count }) {
count = count + 1; // wrong: changes a local copy, the parent never sees it
return <p>{count}</p>;
}
function Profile(props) {
props.name = 'Someone else'; // wrong: in development React freezes props, so this throws a TypeError
return <p>{props.name}</p>;
}
Le props cambiano comunque nel tempo. Quando il genitore esegue un nuovo render con valori nuovi, il figlio riceve un nuovo oggetto props e si renderizza con quello:
Temperature non cambia mai celsius. Calcola fahrenheit a partire da esso a ogni rendering. Trascina lo slider e lo stato del genitore cambia, quindi il figlio riceve una nuova prop. Se un figlio ha bisogno di un valore che può cambiare da solo, quel valore è stato, non una prop.
Props vs stato
Props e stato sono entrambi semplici valori JavaScript che influenzano ciò che un componente renderizza, e un cambiamento di uno dei due provoca un nuovo render del componente. La differenza sta in chi possiede il valore.
| Props | Stato | |
|---|---|---|
| Da dove arriva | Dal genitore, come attributi JSX | Dal componente stesso, da useState o useReducer |
| Il componente può cambiarlo | No, è di sola lettura | Sì, tramite il suo setter |
| Uso tipico | Configurare un componente: un'etichetta, una dimensione, i dati da mostrare | Ricordare qualcosa che cambia: il testo di un input, un menu aperto |
Spesso lo stesso valore è entrambe le cose. Nell'esempio della temperatura qui sopra, celsius è stato in App e prop in Temperature. Il proprietario lo tiene come stato e lo passa verso il basso come prop, insieme a una funzione per cambiarlo quando un figlio ne ha bisogno.
Una prop può contenere qualsiasi valore, inclusi JSX e componenti. Passare un elemento come icon={<StarIcon />} permette a un genitore di riempire uno spazio in un figlio, la stessa idea di children ma con un nome a tua scelta.
La prop children
Tutto ciò che metti tra il tag di apertura e quello di chiusura di un componente arriva come prop chiamata children. È così che costruisci wrapper come card, pannelli e layout che non conoscono in anticipo il loro contenuto:
La pagina su children spiega come passare più spazi di contenuto e come lavorare con children in sicurezza.
Le key non sono props
key sembra un attributo, ma React la tiene per sé per abbinare gli elementi delle liste tra un rendering e l'altro. Il componente non la riceve mai:
La console mostra props.key come undefined e props.id con il valore reale. Quando un figlio ha bisogno dell'identificatore, passaglielo una seconda volta con un altro nome, come fa qui id. Una build di sviluppo avvisa anche quando leggi props.key; l'anteprima gira come una build di produzione, quindi vedi solo l'undefined.
Domande frequenti
Cosa sono le props in React?
Le props (abbreviazione di properties) sono gli argomenti di un componente. Un genitore le passa come attributi JSX, <Avatar size={48} />, e il figlio le riceve come un unico oggetto, di solito destrutturato: function Avatar({ size }).
Come imposto un valore predefinito per una prop?
Usa un valore predefinito nella destrutturazione: function Button({ size = 'medium' }). Il valore predefinito si applica quando la prop manca o è undefined. React 19 ha rimosso defaultProps per i function component; i class component lo supportano ancora.
Un componente figlio può cambiare le sue props?
No. Le props sono di sola lettura. Per cambiare ciò che mostra un figlio, il genitore passa nuove props; per permettere al figlio di chiedere una modifica, il genitore passa una funzione come onChange e il figlio la chiama.
Qual è la differenza tra props e stato?
Le props arrivano dal genitore e il figlio non può cambiarle. Lo stato appartiene al componente stesso e cambia tramite il suo setter. Spesso un valore è stato nel genitore e prop nei suoi figli.
Perché props.key è undefined?
key (come ref nelle versioni più vecchie di React) è usata da React stesso per tracciare gli elementi delle liste e non viene passata al componente. Se il figlio ha bisogno del valore, passalo di nuovo con un altro nome, per esempio <Row key={id} id={id} />.
