`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+In CSS, diverse proprietà come `color` e `background-color` non si sovrascrivono a vicenda. Puoi impostare il `color` di tutti i `
` su rosso senza impattare sul `background-color`. In maniera simile, **diversi context React non si sovrascrivono a vicenda.** Ogni context che crei con `createContext()` è completamente separato dagli altri e lega i componenti che utilizzano e forniscono *quello specifico* context. Un componente può utilizzare o fornire molti context diversi senza problemi.
-## Before you use context {/*before-you-use-context*/}
+## Prima che usi il context {/*before-you-use-context*/}
-Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.**
+Il context è molto allettante da usare! Tuttavia, ciò significa anche che è troppo facile abusarne. **Il fatto che tu debba passare alcune props a vari livelli di profondità non significa necessariamente che dovresti mettere quelle informazioni in un context.**
-Here's a few alternatives you should consider before using context:
+Ecco alcune alternative che dovresti considerare prima di utilizzare il context:
-1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
-2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `
`. Instead, make `Layout` take `children` as a prop, and render `
`. This reduces the number of layers between the component specifying the data and the one that needs it.
+1. **Inizia [passando le props.](/learn/passing-props-to-a-component)** Se i tuoi componenti non sono banali, non è insolito passare una dozzina di props attraverso una dozzina di componenti. Potrebbe sembrare un lavoro noioso, ma rende molto chiaro quali componenti utilizzano quali dati! La persona che manterrà il tuo codice sarà grata che tu abbia reso esplicito il flusso dei dati tramite le props.
+2. **Estrai i componenti e [passa JSX come `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) a essi.** Se passi alcuni dati attraverso molti strati di componenti intermedi che non utilizzano quei dati (e li passano solo più in basso), spesso significa che hai dimenticato di estrarre alcuni componenti lungo la strada. Ad esempio, forse passi props di dati come `posts` a componenti visivi che non li utilizzano direttamente, come `
`. Invece, fai in modo che `Layout` accetti `children` come prop e renderizza `
`. Questo riduce il numero di strati tra il componente che specifica i dati e quello che ne ha bisogno.
-If neither of these approaches works well for you, consider context.
+Se nessuno di questi approcci fa al caso tuo, considera il context.
-## Use cases for context {/*use-cases-for-context*/}
+## Casi d'uso del context {/*use-cases-for-context*/}
-* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
-* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
-* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
-* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
-
-Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+* **Temi:** Se la tua app consente all'utente di cambiare l'aspetto (ad esempio la modalità scura), puoi inserire un context provider alla radice della tua app e utilizzare quel context nei componenti che devono adattare il loro aspetto visivo.
+* **Account corrente:** Molti componenti potrebbero avere bisogno di conoscere l'utente attualmente loggato. Metterlo nel context lo rende comodo da leggere ovunque nell'albero. Alcune app consentono anche di operare con più account contemporaneamente (ad esempio, per lasciare un commento come un utente diverso). In questi casi, può essere comodo avvolgere una parte dell'interfaccia utente in un provider nidificato con un valore di account diverso.
+* **Routing:** La maggior parte delle soluzioni di routing utilizza internamente il context per memorizzare la rotta corrente. È così che ogni collegamento "sa" se è attivo o no. Se crei il tuo router, potresti voler fare lo stesso.
+* **Gestione dello state:** Man mano che la tua app cresce, potresti finire con molto state vicino alla radice dell'app. Molti componenti distanti al di sotto potrebbero volerlo modificare. È comune [usare un reducer insieme al context](/learn/scaling-up-with-reducer-and-context) per gestire uno state complesso e passarlo in basso a componenti distanti senza troppi sforzi.
-In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+Il context non è limitato a valori statici. Se passi un valore diverso nella renderizzazione successiva, React aggiornerà tutti i componenti sottostanti che lo leggono! Ecco perché il context spesso è utilizzato in combinazione con lo state.
+
+In generale, se alcune informazioni sono necessarie da componenti distanti in diverse parti dell'albero, quello è un buon indicatore che il context ti aiuterà.
-* Context lets a component provide some information to the entire tree below it.
-* To pass context:
- 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
- 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
- 3. Wrap children into `` to provide it from a parent.
-* Context passes through any components in the middle.
-* Context lets you write components that "adapt to their surroundings".
-* Before you use context, try passing props or passing JSX as `children`.
+* Il context consente a un componente di fornire alcune informazioni a tutto l'albero sottostante:
+* Per passare il context:
+ 1. Crealo ed esportalo con `export const MyContext = createContext(defaultValue)`.
+ 2. Passalo all'Hook `useContext(MyContext)` per leggerlo in qualsiasi componente figlio, indipendentemente da quando in profondità sia.
+ 3. Avvolgi i figli in `` per fornirlo da un genitore.
+* Il context attraversa qualsiasi componente intermedio.
+* Il context ti consente di scrivere componenti che "si adattano all'ambiente circostante".
+* Prima di utilizzare il context, prova a passare le props o passare il JSX come `children`.
-#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
+#### Sostituisci il prop drilling con il context {/*replace-prop-drilling-with-context*/}
-In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it.
+In questo esempio, selezionare la checkbox modifica la prop `imageSize` passata a ciascun ``. Lo state della checkbox è contenuto nel componente di livello superiore `App`, ma ogni `` deve essere consapevole di esso.
-Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+Attualmente, `App` passa `imageSize` a `List`, che lo passa a ciascun `Place`, che lo passa a `PlaceImage`. Rimuovi la prop `imageSize` e, invece, passala direttamente dal componente `App` a `PlaceImage`.
-You can declare context in `Context.js`.
+Puoi dichiarare il context in `Context.js`.
@@ -1020,9 +1020,9 @@ li {
-Remove `imageSize` prop from all the components.
+Rimuovi la prop `imageSize` da tutti i componenti.
-Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+Crea ed esporta `ImageSizeContext` da `Context.js`. Quindi avvolgi `List` in `` per passare il valore in basso, e utilizza `useContext(ImageSizeContext)` per leggerlo in `PlaceImage`:
@@ -1157,7 +1157,7 @@ li {
-Note how components in the middle don't need to pass `imageSize` anymore.
+Nota come i componenti intermedi non hanno più bisogno di passare `imageSize`.
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index b76363d51..5d0379bd9 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -146,7 +146,7 @@
"path": "/learn/extracting-state-logic-into-a-reducer"
},
{
- "title": "Passing Data Deeply with Context",
+ "title": "Passare i Dati in Profondità con il Context",
"path": "/learn/passing-data-deeply-with-context"
},
{