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/reference/react/createContext.md
+42-35Lines changed: 42 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,17 @@
1
1
---
2
2
title: createContext
3
+
translationStatus: ai-draft
3
4
---
4
5
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
+
5
12
<Intro>
6
13
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.
Call`createContext`outside of any components to create a context.
30
+
Chiama`createContext`al di fuori di qualsiasi componente per creare un context.
24
31
25
32
```js
26
33
import { createContext } from'react';
27
34
28
35
constThemeContext=createContext('light');
29
36
```
30
37
31
-
[See more examples below.](#usage)
38
+
[Vedi altri esempi sotto.](#usage)
32
39
33
40
#### Parameters {/*parameters*/}
34
41
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.
36
43
37
44
#### Returns {/*returns*/}
38
45
39
-
`createContext`returns a context object.
46
+
`createContext`restituisce un oggetto context.
40
47
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à:
42
49
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.
46
53
47
54
---
48
55
49
-
### `SomeContext` Provider {/*provider*/}
56
+
### Provider di `SomeContext` {/*provider*/}
50
57
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:
52
59
53
60
```js
54
61
functionApp() {
@@ -64,25 +71,25 @@ function App() {
64
71
65
72
<Note>
66
73
67
-
Starting in React 19, you can render `<SomeContext>`as a provider.
74
+
A partire da React 19, puoi renderizzare `<SomeContext>`come provider.
68
75
69
-
In older versions of React, use`<SomeContext.Provider>`.
76
+
Nelle versioni precedenti di React, usa`<SomeContext.Provider>`.
70
77
71
78
</Note>
72
79
73
80
#### Props {/*provider-props*/}
74
81
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.
76
83
77
84
---
78
85
79
86
### `SomeContext.Consumer` {/*consumer*/}
80
87
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:
82
89
83
90
```js
84
91
functionButton() {
85
-
// 🟡 Legacy way (not recommended)
92
+
// 🟡 Modo legacy (sconsigliato)
86
93
return (
87
94
<ThemeContext.Consumer>
88
95
{theme=> (
@@ -93,29 +100,29 @@ function Button() {
93
100
}
94
101
```
95
102
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):**
97
104
98
105
```js
99
106
functionButton() {
100
-
// ✅ Recommended way
107
+
// ✅ Modo consigliato
101
108
consttheme=useContext(ThemeContext);
102
109
return<button className={theme} />;
103
110
}
104
111
```
105
112
106
113
#### Props {/*consumer-props*/}
107
114
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.
109
116
110
117
---
111
118
112
119
## Usage {/*usage*/}
113
120
114
-
### Creating context {/*creating-context*/}
121
+
### Creare un context {/*creating-context*/}
115
122
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.
117
124
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.
`createContext`returns a <CodeStepstep={1}>context object</CodeStep>. Components can read context by passing it to[`useContext()`](/reference/react/useContext):
134
+
`createContext`restituisce un <CodeStepstep={1}>oggetto context</CodeStep>. I componenti possono leggere il context passandolo a[`useContext()`](/reference/react/useContext):
By default, the values they receive will be the <CodeStepstep={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 <CodeStepstep={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.
142
149
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:**
144
151
145
152
```js {8-9,11-12}
146
153
functionApp() {
@@ -159,15 +166,15 @@ function App() {
159
166
}
160
167
```
161
168
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.
163
170
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)
165
172
166
173
---
167
174
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*/}
169
176
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:
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:
181
188
182
189
```js {2}
183
190
// Button.js
@@ -205,21 +212,21 @@ function App() {
205
212
}
206
213
```
207
214
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)
209
216
210
217
---
211
218
212
219
## Troubleshooting {/*troubleshooting*/}
213
220
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*/}
215
222
216
223
217
-
Code like this specifies the *default* context value:
224
+
Codice come questo specifica il valore *predefinito* del context:
218
225
219
226
```js
220
227
constThemeContext=createContext('light');
221
228
```
222
229
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.
224
231
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