You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/sharing-state-between-components.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,18 +11,18 @@ Questa pagina è stata tradotta automaticamente e supervisionata da un maintaine
11
11
12
12
<Intro>
13
13
14
-
A volte, vuoi che lo state di due componenti cambi sempre insieme. Per farlo, rimuovi lo state da entrambi, spostalo al loro genitore comune più vicino e poi passalo loro tramite le props. Questo è noto come *alzare lo state* ed è una delle cose più comuni che farai scrivendo codice React.
14
+
A volte, vuoi che lo state di due componenti cambi sempre insieme. Per farlo, rimuovi lo state da entrambi, spostalo al loro genitore comune più vicino e poi passalo loro tramite le props. Questo è noto come *sollevare lo state* ed è una delle cose più comuni che farai scrivendo codice React.
15
15
16
16
</Intro>
17
17
18
18
<YouWillLearn>
19
19
20
-
- Come condividere lo state tra componenti alzandolo
20
+
- Come condividere lo state tra componenti sollevandolo
21
21
- Cosa sono i componenti controllati e non controllati
22
22
23
23
</YouWillLearn>
24
24
25
-
## Alzare lo state con un esempio {/*lifting-state-up-by-example*/}
25
+
## Sollevare lo state con un esempio {/*lifting-state-up-by-example*/}
26
26
27
27
In questo esempio, un componente genitore `Accordion` renderizza due `Panel` separati:
28
28
@@ -100,7 +100,7 @@ Cliccare il pulsante di uno dei `Panel` aggiornerà solo lo state `isActive` di
100
100
101
101
**Ma ora diciamo che vuoi cambiarlo in modo che solo un pannello sia espanso in qualsiasi momento.** Con questo design, espandere il secondo pannello dovrebbe collassare il primo. Come faresti?
102
102
103
-
Per coordinare questi due pannelli, devi "alzare il loro state" a un componente genitore in tre passaggi:
103
+
Per coordinare questi due pannelli, devi "sollevare il loro state" a un componente genitore in tre passaggi:
104
104
105
105
1.**Rimuovi** lo state dai componenti figli.
106
106
2.**Passa** dati hardcodati dal genitore comune.
@@ -126,7 +126,7 @@ Ora il componente genitore di `Panel` può *controllare* `isActive` [passandolo
126
126
127
127
### Passaggio 2: Passa dati hardcodati dal genitore comune {/*step-2-pass-hardcoded-data-from-the-common-parent*/}
128
128
129
-
Per alzare lo state, devi individuare il genitore comune più vicino di *entrambi* i componenti figli che vuoi coordinare:
129
+
Per sollevare lo state, devi individuare il genitore comune più vicino di *entrambi* i componenti figli che vuoi coordinare:
130
130
131
131
* `Accordion` *(genitore comune più vicino)*
132
132
- `Panel`
@@ -183,7 +183,7 @@ Prova a modificare i valori hardcodati di `isActive` nel componente `Accordion`
183
183
184
184
### Passaggio 3: Aggiungi lo state al genitore comune {/*step-3-add-state-to-the-common-parent*/}
185
185
186
-
Alzare lo state spesso cambia la natura di ciò che memorizzi come state.
186
+
Sollevare lo state spesso cambia la natura di ciò che memorizzi come state.
187
187
188
188
In questo caso, solo un pannello dovrebbe essere attivo alla volta. Questo significa che il componente genitore comune `Accordion` deve tenere traccia di *quale* pannello è quello attivo. Invece di un valore `boolean`, potrebbe usare un numero come indice del `Panel` attivo per la variabile di state:
189
189
@@ -273,7 +273,7 @@ h3, p { margin: 5px 0px; }
273
273
274
274
</Sandpack>
275
275
276
-
Questo completa l'alzamento dello state! Spostare lo state nel componente genitore comune ti ha permesso di coordinare i due pannelli. Usare l'indice attivo invece di due flag "è mostrato" ha garantito che solo un pannello sia attivo in un dato momento. E passare il gestore di eventi al figlio ha permesso al figlio di cambiare lo state del genitore.
276
+
Questo completa il sollevamento dello state! Spostare lo state nel componente genitore comune ti ha permesso di coordinare i due pannelli. Usare l'indice attivo invece di due flag "è mostrato" ha garantito che solo un pannello sia attivo in un dato momento. E passare il gestore di eventi al figlio ha permesso al figlio di cambiare lo state del genitore.
277
277
278
278
<DiagramGroup>
279
279
@@ -311,7 +311,7 @@ Quando scrivi un componente, considera quali informazioni al suo interno dovrebb
311
311
312
312
In un'applicazione React, molti componenti avranno il proprio state. Parte dello state può "risiedere" vicino ai componenti foglia (componenti alla base dell'albero), come gli input. Altro state può "risiedere" più in alto nell'app. Ad esempio, anche le librerie di routing lato client di solito sono implementate memorizzando la route corrente nello state di React e passandola ai figli tramite props!
313
313
314
-
**Per ogni pezzo unico di state, sceglierai il componente che lo "possiede".** Questo principio è anche noto come avere una ["fonte unica di verità".](https://en.wikipedia.org/wiki/Single_source_of_truth) Non significa che tutto lo state risieda in un unico posto, ma che per _ogni_ pezzo di state c'è un componente _specifico_ che detiene quell'informazione. Invece di duplicare lo state condiviso tra componenti, *alzalo* al loro genitore condiviso comune e *passalo ai figli* che ne hanno bisogno.
314
+
**Per ogni pezzo unico di state, sceglierai il componente che lo "possiede".** Questo principio è anche noto come avere una ["fonte unica di verità".](https://en.wikipedia.org/wiki/Single_source_of_truth) Non significa che tutto lo state risieda in un unico posto, ma che per _ogni_ pezzo di state c'è un componente _specifico_ che detiene quell'informazione. Invece di duplicare lo state condiviso tra componenti, *sollevalo* al loro genitore condiviso comune e *passalo ai figli* che ne hanno bisogno.
315
315
316
316
La tua app cambierà mentre ci lavori. È comune spostare lo state verso il basso o di nuovo verso l'alto mentre stai ancora capendo dove "risiede" ogni pezzo dello state. Fa tutto parte del processo!
317
317
@@ -334,7 +334,7 @@ Questi due input sono indipendenti. Falli rimanere sincronizzati: modificare un
334
334
335
335
<Hint>
336
336
337
-
Dovrai alzare il loro state nel componente genitore.
337
+
Dovrai sollevare il loro state nel componente genitore.
338
338
339
339
</Hint>
340
340
@@ -535,7 +535,7 @@ export const foods = [{
535
535
536
536
<Solution>
537
537
538
-
Alza lo state `query` nel componente `FilterableList`. Chiama `filterItems(foods, query)` per ottenere la lista filtrata e passala a `List`. Ora cambiare l'input della query si riflette nella lista:
538
+
Solleva lo state `query` nel componente `FilterableList`. Chiama`filterItems(foods, query)` per ottenere la lista filtrata e passala a `List`. Ora cambiare l'input della query si riflette nella lista:
0 commit comments