From e2ccc679d17a3a31ca31f49dae217971bc52760b Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Mon, 14 Sep 2026 13:33:15 +0300 Subject: [PATCH] translate(reference): createContext Signed-off-by: Alessandro De Blasis --- src/content/reference/react/createContext.md | 77 +++++++++++--------- 1 file changed, 42 insertions(+), 35 deletions(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index e4e9bcf62..1f6a96402 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -1,10 +1,17 @@ --- title: createContext +translationStatus: ai-draft --- + + +Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react/createContext.md). + + + -`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read. +`createContext` ti permette di creare un [context](/learn/passing-data-deeply-with-context) che i componenti possono fornire o leggere. ```js const SomeContext = createContext(defaultValue) @@ -20,7 +27,7 @@ const SomeContext = createContext(defaultValue) ### `createContext(defaultValue)` {/*createcontext*/} -Call `createContext` outside of any components to create a context. +Chiama `createContext` al di fuori di qualsiasi componente per creare un context. ```js import { createContext } from 'react'; @@ -28,27 +35,27 @@ import { createContext } from 'react'; const ThemeContext = createContext('light'); ``` -[See more examples below.](#usage) +[Vedi altri esempi sotto.](#usage) #### Parameters {/*parameters*/} -* `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time. +* `defaultValue`: Il valore che vuoi che il context abbia quando non c'è un context provider corrispondente nell'albero sopra il componente che legge il context. Se non hai un valore predefinito significativo, specifica `null`. Il valore predefinito è pensato come fallback "d'ultima risorsa". È statico e non cambia mai nel tempo. #### Returns {/*returns*/} -`createContext` returns a context object. +`createContext` restituisce un oggetto context. -**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: +**L'oggetto context in sé non contiene alcuna informazione.** Rappresenta _quale_ context altri componenti leggono o forniscono. In genere, userai [`SomeContext`](#provider) nei componenti sopra per specificare il valore del context, e chiamerai [`useContext(SomeContext)`](/reference/react/useContext) nei componenti sotto per leggerlo. L'oggetto context ha alcune proprietà: -* `SomeContext` lets you provide the context value to components. -* `SomeContext.Consumer` is an alternative and rarely used way to read the context value. -* `SomeContext.Provider` is a legacy way to provide the context value before React 19. +* `SomeContext` ti permette di fornire il valore del context ai componenti. +* `SomeContext.Consumer` è un modo alternativo e raramente usato per leggere il valore del context. +* `SomeContext.Provider` è un modo legacy per fornire il valore del context prima di React 19. --- -### `SomeContext` Provider {/*provider*/} +### Provider di `SomeContext` {/*provider*/} -Wrap your components into a context provider to specify the value of this context for all components inside: +Avvolgi i tuoi componenti in un context provider per specificare il valore di questo context per tutti i componenti al suo interno: ```js function App() { @@ -64,25 +71,25 @@ function App() { -Starting in React 19, you can render `` as a provider. +A partire da React 19, puoi renderizzare `` come provider. -In older versions of React, use ``. +Nelle versioni precedenti di React, usa ``. #### Props {/*provider-props*/} -* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it. +* `value`: Il valore che vuoi passare a tutti i componenti che leggono questo context all'interno di questo provider, indipendentemente dalla profondità. Il valore del context può essere di qualsiasi tipo. Un componente che chiama [`useContext(SomeContext)`](/reference/react/useContext) all'interno del provider riceve il `value` del context provider corrispondente più interno sopra di esso. --- ### `SomeContext.Consumer` {/*consumer*/} -Before `useContext` existed, there was an older way to read context: +Prima che esistesse `useContext`, c'era un modo più vecchio per leggere il context: ```js function Button() { - // 🟡 Legacy way (not recommended) + // 🟡 Modo legacy (sconsigliato) return ( {theme => ( @@ -93,11 +100,11 @@ function Button() { } ``` -Although this older way still works, **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:** +Anche se questo modo più vecchio funziona ancora, **il codice scritto di recente dovrebbe leggere il context con [`useContext()`](/reference/react/useContext):** ```js function Button() { - // ✅ Recommended way + // ✅ Modo consigliato const theme = useContext(ThemeContext); return