Skip to content

Commit 8522886

Browse files
committed
fix(learn): address review and visual check for sharing-state (PR #734)
Replace alzare with sollevare per glossary (lifting state up). Signed-off-by: Alessandro De Blasis <alex@deblasis.net>
1 parent e34f587 commit 8522886

1 file changed

Lines changed: 10 additions & 10 deletions

File tree

src/content/learn/sharing-state-between-components.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@ Questa pagina è stata tradotta automaticamente e supervisionata da un maintaine
1111

1212
<Intro>
1313

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.
1515

1616
</Intro>
1717

1818
<YouWillLearn>
1919

20-
- Come condividere lo state tra componenti alzandolo
20+
- Come condividere lo state tra componenti sollevandolo
2121
- Cosa sono i componenti controllati e non controllati
2222

2323
</YouWillLearn>
2424

25-
## Alzare lo state con un esempio {/*lifting-state-up-by-example*/}
25+
## Sollevare lo state con un esempio {/*lifting-state-up-by-example*/}
2626

2727
In questo esempio, un componente genitore `Accordion` renderizza due `Panel` separati:
2828

@@ -100,7 +100,7 @@ Cliccare il pulsante di uno dei `Panel` aggiornerà solo lo state `isActive` di
100100

101101
**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?
102102

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

105105
1. **Rimuovi** lo state dai componenti figli.
106106
2. **Passa** dati hardcodati dal genitore comune.
@@ -126,7 +126,7 @@ Ora il componente genitore di `Panel` può *controllare* `isActive` [passandolo
126126
127127
### Passaggio 2: Passa dati hardcodati dal genitore comune {/*step-2-pass-hardcoded-data-from-the-common-parent*/}
128128
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:
130130
131131
* `Accordion` *(genitore comune più vicino)*
132132
- `Panel`
@@ -183,7 +183,7 @@ Prova a modificare i valori hardcodati di `isActive` nel componente `Accordion`
183183

184184
### Passaggio 3: Aggiungi lo state al genitore comune {/*step-3-add-state-to-the-common-parent*/}
185185

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.
187187

188188
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:
189189

@@ -273,7 +273,7 @@ h3, p { margin: 5px 0px; }
273273
274274
</Sandpack>
275275
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.
277277

278278
<DiagramGroup>
279279

@@ -311,7 +311,7 @@ Quando scrivi un componente, considera quali informazioni al suo interno dovrebb
311311
312312
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!
313313

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.
315315

316316
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!
317317
@@ -334,7 +334,7 @@ Questi due input sono indipendenti. Falli rimanere sincronizzati: modificare un
334334

335335
<Hint>
336336

337-
Dovrai alzare il loro state nel componente genitore.
337+
Dovrai sollevare il loro state nel componente genitore.
338338

339339
</Hint>
340340

@@ -535,7 +535,7 @@ export const foods = [{
535535

536536
<Solution>
537537

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:
539539
540540
<Sandpack>
541541

0 commit comments

Comments
 (0)