Skip to content

Commit 8995eb0

Browse files
committed
translate(reference): createContext
Signed-off-by: Alessandro De Blasis <alex@deblasis.net>
1 parent 4c8b835 commit 8995eb0

1 file changed

Lines changed: 42 additions & 35 deletions

File tree

src/content/reference/react/createContext.md

Lines changed: 42 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
---
22
title: createContext
3+
translationStatus: ai-draft
34
---
45

6+
<Note>
7+
8+
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).
9+
10+
</Note>
11+
512
<Intro>
613

7-
`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read.
14+
`createContext` ti permette di creare un [context](/learn/passing-data-deeply-with-context) che i componenti possono fornire o leggere.
815

916
```js
1017
const SomeContext = createContext(defaultValue)
@@ -20,35 +27,35 @@ const SomeContext = createContext(defaultValue)
2027

2128
### `createContext(defaultValue)` {/*createcontext*/}
2229

23-
Call `createContext` outside of any components to create a context.
30+
Chiama `createContext` al di fuori di qualsiasi componente per creare un context.
2431

2532
```js
2633
import { createContext } from 'react';
2734

2835
const ThemeContext = createContext('light');
2936
```
3037

31-
[See more examples below.](#usage)
38+
[Vedi altri esempi sotto.](#usage)
3239

3340
#### Parameters {/*parameters*/}
3441

35-
* `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.
42+
* `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.
3643

3744
#### Returns {/*returns*/}
3845

39-
`createContext` returns a context object.
46+
`createContext` restituisce un oggetto context.
4047

41-
**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:
48+
**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à:
4249

43-
* `SomeContext` lets you provide the context value to components.
44-
* `SomeContext.Consumer` is an alternative and rarely used way to read the context value.
45-
* `SomeContext.Provider` is a legacy way to provide the context value before React 19.
50+
* `SomeContext` ti permette di fornire il valore del context ai componenti.
51+
* `SomeContext.Consumer` è un modo alternativo e raramente usato per leggere il valore del context.
52+
* `SomeContext.Provider` è un modo legacy per fornire il valore del context prima di React 19.
4653

4754
---
4855

49-
### `SomeContext` Provider {/*provider*/}
56+
### Provider di `SomeContext` {/*provider*/}
5057

51-
Wrap your components into a context provider to specify the value of this context for all components inside:
58+
Avvolgi i tuoi componenti in un context provider per specificare il valore di questo context per tutti i componenti al suo interno:
5259

5360
```js
5461
function App() {
@@ -64,25 +71,25 @@ function App() {
6471

6572
<Note>
6673

67-
Starting in React 19, you can render `<SomeContext>` as a provider.
74+
A partire da React 19, puoi renderizzare `<SomeContext>` come provider.
6875

69-
In older versions of React, use `<SomeContext.Provider>`.
76+
Nelle versioni precedenti di React, usa `<SomeContext.Provider>`.
7077

7178
</Note>
7279

7380
#### Props {/*provider-props*/}
7481

75-
* `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.
82+
* `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.
7683

7784
---
7885

7986
### `SomeContext.Consumer` {/*consumer*/}
8087

81-
Before `useContext` existed, there was an older way to read context:
88+
Prima che esistesse `useContext`, c'era un modo più vecchio per leggere il context:
8289

8390
```js
8491
function Button() {
85-
// 🟡 Legacy way (not recommended)
92+
// 🟡 Modo legacy (sconsigliato)
8693
return (
8794
<ThemeContext.Consumer>
8895
{theme => (
@@ -93,29 +100,29 @@ function Button() {
93100
}
94101
```
95102

96-
Although this older way still works, **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:**
103+
Anche se questo modo più vecchio funziona ancora, **il codice scritto di recente dovrebbe leggere il context con [`useContext()`](/reference/react/useContext):**
97104

98105
```js
99106
function Button() {
100-
//Recommended way
107+
//Modo consigliato
101108
const theme = useContext(ThemeContext);
102109
return <button className={theme} />;
103110
}
104111
```
105112

106113
#### Props {/*consumer-props*/}
107114

108-
* `children`: A function. React will call the function you pass with the current context value determined by the same algorithm as [`useContext()`](/reference/react/useContext) does, and render the result you return from this function. React will also re-run this function and update the UI whenever the context from the parent components changes.
115+
* `children`: Una funzione. React chiamerà la funzione che passi con il valore attuale del context determinato dallo stesso algoritmo di [`useContext()`](/reference/react/useContext), e renderizzerà il risultato che restituisci da questa funzione. React rieseguirà anche questa funzione e aggiornerà la UI ogni volta che il context dei componenti genitore cambia.
109116

110117
---
111118

112119
## Usage {/*usage*/}
113120

114-
### Creating context {/*creating-context*/}
121+
### Creare un context {/*creating-context*/}
115122

116-
Context lets components [pass information deep down](/learn/passing-data-deeply-with-context) without explicitly passing props.
123+
Il context consente ai componenti di [passare informazioni in profondità](/learn/passing-data-deeply-with-context) senza passare esplicitamente le props.
117124

118-
Call `createContext` outside any components to create one or more contexts.
125+
Chiama `createContext` al di fuori di qualsiasi componente per creare uno o più context.
119126

120127
```js [[1, 3, "ThemeContext"], [1, 4, "AuthContext"], [3, 3, "'light'"], [3, 4, "null"]]
121128
import { createContext } from 'react';
@@ -124,7 +131,7 @@ const ThemeContext = createContext('light');
124131
const AuthContext = createContext(null);
125132
```
126133

127-
`createContext` returns a <CodeStep step={1}>context object</CodeStep>. Components can read context by passing it to [`useContext()`](/reference/react/useContext):
134+
`createContext` restituisce un <CodeStep step={1}>oggetto context</CodeStep>. I componenti possono leggere il context passandolo a [`useContext()`](/reference/react/useContext):
128135

129136
```js [[1, 2, "ThemeContext"], [1, 7, "AuthContext"]]
130137
function Button() {
@@ -138,9 +145,9 @@ function Profile() {
138145
}
139146
```
140147

141-
By default, the values they receive will be the <CodeStep step={3}>default values</CodeStep> you have specified when creating the contexts. However, by itself this isn't useful because the default values never change.
148+
Per impostazione predefinita, i valori che ricevono saranno i <CodeStep step={3}>valori predefiniti</CodeStep> che hai specificato quando hai creato i context. Tuttavia, da solo questo non è utile perché i valori predefiniti non cambiano mai.
142149

143-
Context is useful because you can **provide other, dynamic values from your components:**
150+
Il context è utile perché puoi **fornire altri valori dinamici dai tuoi componenti:**
144151

145152
```js {8-9,11-12}
146153
function App() {
@@ -159,15 +166,15 @@ function App() {
159166
}
160167
```
161168

162-
Now the `Page` component and any components inside it, no matter how deep, will "see" the passed context values. If the passed context values change, React will re-render the components reading the context as well.
169+
Ora il componente `Page` e qualsiasi componente al suo interno, indipendentemente dalla profondità, "vedrà" i valori del context passati. Se i valori del context passati cambiano, React ri-renderizzerà anche i componenti che leggono il context.
163170

164-
[Read more about reading and providing context and see examples.](/reference/react/useContext)
171+
[Leggi di più sulla lettura e la fornitura del context e vedi esempi.](/reference/react/useContext)
165172

166173
---
167174

168-
### Importing and exporting context from a file {/*importing-and-exporting-context-from-a-file*/}
175+
### Importare ed esportare un context da un file {/*importing-and-exporting-context-from-a-file*/}
169176

170-
Often, components in different files will need access to the same context. This is why it's common to declare contexts in a separate file. Then you can use the [`export` statement](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) to make context available for other files:
177+
Spesso, componenti in file diversi avranno bisogno di accedere allo stesso context. Per questo è comune dichiarare i context in un file separato. Poi puoi usare l'[istruzione `export`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Statements/export) per mettere il context a disposizione di altri file:
171178

172179
```js {4-5}
173180
// Contexts.js
@@ -177,7 +184,7 @@ export const ThemeContext = createContext('light');
177184
export const AuthContext = createContext(null);
178185
```
179186

180-
Components declared in other files can then use the [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) statement to read or provide this context:
187+
I componenti dichiarati in altri file possono poi usare l'[istruzione `import`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Statements/import) per leggere o fornire questo context:
181188

182189
```js {2}
183190
// Button.js
@@ -205,21 +212,21 @@ function App() {
205212
}
206213
```
207214

208-
This works similar to [importing and exporting components.](/learn/importing-and-exporting-components)
215+
Funziona in modo simile a [importare ed esportare componenti.](/learn/importing-and-exporting-components)
209216

210217
---
211218

212219
## Troubleshooting {/*troubleshooting*/}
213220

214-
### I can't find a way to change the context value {/*i-cant-find-a-way-to-change-the-context-value*/}
221+
### Non trovo un modo per cambiare il valore del context {/*i-cant-find-a-way-to-change-the-context-value*/}
215222

216223

217-
Code like this specifies the *default* context value:
224+
Codice come questo specifica il valore *predefinito* del context:
218225

219226
```js
220227
const ThemeContext = createContext('light');
221228
```
222229

223-
This value never changes. React only uses this value as a fallback if it can't find a matching provider above.
230+
Questo valore non cambia mai. React usa questo valore solo come fallback se non trova un provider corrispondente sopra.
224231

225-
To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context)
232+
Per far cambiare il context nel tempo, [aggiungi lo state e avvolgi i componenti in un context provider.](/reference/react/useContext#updating-data-passed-via-context)

0 commit comments

Comments
 (0)