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
Call`createContext`outside of any components to create a context.
23
+
Kutsu`createContext`-funktiota komponenttien ulkopuolella luodaksesi kontekstin.
24
24
25
25
```js
26
26
import { createContext } from'react';
27
27
28
28
constThemeContext=createContext('light');
29
29
```
30
30
31
-
[See more examples below.](#usage)
31
+
[Katso lisää esimerkkejä alapuolelta.](#käyttö)
32
32
33
-
#### Parameters {/*parameters*/}
33
+
#### Parametrit {/*parameters*/}
34
34
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.
35
+
*`defaultValue`: Arvo, jonka haluat kontekstilla olevan, kun puun yläpuolella olevista komponenteista ei löydy vastaavaa kontekstin tarjoajaa. Jos sinulla ei ole mitään merkityksellistä oletusarvoa, määritä`null`. Oletusarvo on tarkoitettu "viimeisenä keinona" vara-arvona. Se on staattinen eikä muutu ajan myötä.
36
36
37
-
#### Returns {/*returns*/}
37
+
#### Palautukset {/*returns*/}
38
38
39
-
`createContext`returns a context object.
39
+
`createContext`palauttaa kontekstiolion.
40
40
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`](#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:
41
+
**Kontekstiolio itsessään ei sisällä mitään tietoa.**Se edustaa _minkä_ kontekstin muita komponentteja lukee tai tarjoaa. Tyypillisesti käytät [`SomeContext.Provider`](#provider)ylemmissä komponenteissa määrittääksesi kontekstin arvon ja kutsut [`useContext(SomeContext)`](/reference/react/useContext)-komponenttia alempana lukeaksesi sen. Kontekstioliossa on muutama ominaisuus:
42
42
43
-
*`SomeContext.Provider`lets you provide the context value to components.
44
-
*`SomeContext.Consumer`is an alternative and rarely used way to read the context value.
43
+
*`SomeContext.Provider`avulla voit tarjota kontekstin arvon komponenteille.
44
+
*`SomeContext.Consumer`on vaihtoehtoinen ja harvoin käytetty tapa lukea kontekstin arvo.
45
45
46
46
---
47
47
48
48
### `SomeContext.Provider` {/*provider*/}
49
49
50
-
Wrap your components into a context provider to specify the value of this context for all components inside:
50
+
Kääri komponenttisi kontekstin tarjoajaan määrittääksesi tämän kontekstin arvon kaikille sisäpuolella oleville komponenteille:
51
51
52
52
```js
53
53
functionApp() {
@@ -61,19 +61,19 @@ function App() {
61
61
}
62
62
```
63
63
64
-
#### Props {/*provider-props*/}
64
+
#### Propsit {/*provider-props*/}
65
65
66
-
*`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.
66
+
*`value`: Arvo, jonka haluat välittää kaikille tämän tarjoajan sisällä oleville kontekstin lukeville komponenteille, riippumatta siitä, kuinka syvällä ne ovat. Kontekstin arvo voi olla mitä tahansa tyyppiä. Komponentti, joka kutsuu[`useContext(SomeContext)`](/reference/react/useContext)-Hookkia tarjoajan sisällä, saa `value`:n vastaavasta kontekstin tarjoajasta, joka on sen yläpuolella.
67
67
68
68
---
69
69
70
70
### `SomeContext.Consumer` {/*consumer*/}
71
71
72
-
Before `useContext`existed, there was an older way to read context:
72
+
Ennen kuin `useContext`oli olemassa, oli vanhempi tapa lukea konteksti:
73
73
74
74
```js
75
75
functionButton() {
76
-
// 🟡 Legacy way (not recommended)
76
+
// 🟡 Vanha tapa (ei suositella)
77
77
return (
78
78
<ThemeContext.Consumer>
79
79
{theme=> (
@@ -84,29 +84,29 @@ function Button() {
84
84
}
85
85
```
86
86
87
-
Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext)instead:**
87
+
Vaikka tämä vanhempi tapa silti toimii, **uuden koodin tulisi lukea konteksti [`useContext()`](/reference/react/useContext)-hookilla:**
88
88
89
89
```js
90
90
functionButton() {
91
-
// ✅ Recommended way
91
+
// ✅ Suositeltu tapa
92
92
consttheme=useContext(ThemeContext);
93
93
return<button className={theme} />;
94
94
}
95
95
```
96
96
97
-
#### Props {/*consumer-props*/}
97
+
#### Propsit {/*consumer-props*/}
98
98
99
-
*`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.
99
+
*`children`: Funktio. React kutsuu funktiota, johon välität nykyisen kontekstin arvon, joka on määritetty samalla algoritmilla kuin [`useContext()`](/reference/react/useContext)tekee, ja renderöi tuloksen, jonka palautat tästä funktiosta. React myös uudelleen suorittaa tämän funktion ja päivittää käyttöliittymän aina kun konteksti ylemmistä komponenteista muuttuu.
100
100
101
101
---
102
102
103
-
## Usage {/*usage*/}
103
+
## Käyttö {/*usage*/}
104
104
105
-
### Creating context {/*creating-context*/}
105
+
### Kontekstin luominen {/*creating-context*/}
106
106
107
-
Context lets components [pass information deep down](/learn/passing-data-deeply-with-context)without explicitly passing props.
107
+
Contekstin avulla komponentit voivat [välittää tietoa syvälle](/learn/passing-data-deeply-with-context)ilman, että ne välittävät eksplisiittisesti propseja.
108
108
109
-
Call`createContext`outside any components to create one or more contexts.
109
+
Kutsu`createContext`-funktiota komponenttien ulkopuolella luodaksesi yhden tai useamman kontekstin.
`createContext` returns a <CodeStepstep={1}>context object</CodeStep>. Components can read context by passing it to [`useContext()`](/reference/react/useContext):
118
+
`createContext` palauttaa <CodeStepstep={1}>kontekstiolion</CodeStep>.
119
+
Komponentit voivat lukea kontekstin välittämällä sen [`useContext()`](/reference/react/useContext) -hookille:
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.
133
+
Oletuksena arvot, jotka ne saavat, ovat <CodeStepstep={3}>oletusarvoja</CodeStep>, jotka olet määrittänyt luodessasi kontekstit. Kuitenkin, itsessään tämä ei ole hyödyllistä, koska oletusarvot eivät koskaan muutu.
133
134
134
-
Context is useful because you can **provide other, dynamic values from your components:**
135
+
Kontekstit ovat hyödyllisiä, koska voit **tarjota muita, dynaamisia arvoja komponenteistasi:**
135
136
136
137
```js {8-9,11-12}
137
138
functionApp() {
@@ -150,15 +151,15 @@ function App() {
150
151
}
151
152
```
152
153
153
-
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.
154
+
Nyt `Page`komponentti ja kaikki sen sisällä olevat komponentit, riippumatta siitä kuinka syvällä, "näkevät" välitetyt kontekstin arvot. Jos välitetyt kontekstin arvot muuttuvat, React uudelleen renderöi myös kontekstin lukevat komponentit.
154
155
155
-
[Read more about reading and providing context and see examples.](/reference/react/useContext)
156
+
[Lue lisää kontekstin lukemisesta sekä tarjoamisesta ja katso esimerkkejä.](/reference/react/useContext)
156
157
157
158
---
158
159
159
-
### Importing and exporting context from a file {/*importing-and-exporting-context-from-a-file*/}
160
+
### Kontekstin tuominen ja vieminen tiedostosta {/*importing-and-exporting-context-from-a-file*/}
160
161
161
-
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:
162
+
Usein, eri tiedostoissa olevat komponentit tarvitsevat pääsyn samaan kontekstiin. Tämän vuoksi on yleistä määrittää kontekstit erillisessä tiedostossa. Voit sitten käyttää [`export`-lauseketta](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export)tehdäksesi kontekstin saataville muille tiedostoille:
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:
172
+
Muissa tiedostoissa määritellyt komponentit voivat sitten käyttää [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import)-lauseketta lukeakseen tai tarjotakseen tämän kontekstin:
172
173
173
174
```js {2}
174
175
// Button.js
@@ -196,22 +197,22 @@ function App() {
196
197
}
197
198
```
198
199
199
-
This works similar to [importing and exporting components.](/learn/importing-and-exporting-components)
200
+
Tämä toimii samalla tavalla kuin [komponenttien tuominen ja vieminen.](/learn/importing-and-exporting-components)
200
201
201
202
---
202
203
203
-
## Troubleshooting {/*troubleshooting*/}
204
+
## Vianmääritys {/*troubleshooting*/}
204
205
205
-
### I can't find a way to change the context value {/*i-cant-find-a-way-to-change-the-context-value*/}
206
+
### En löydä tapaa muuttaa kontekstin arvoa {/*i-cant-find-a-way-to-change-the-context-value*/}
206
207
207
208
208
-
Code like this specifies the *default* context value:
209
+
Seuraavanlainen koodi määrittää *oletusarvon* kontekstin arvolle:
209
210
210
211
```js
211
212
constThemeContext=createContext('light');
212
213
```
213
214
214
-
This value never changes. React only uses this value as a fallback if it can't find a matching provider above.
215
+
Tämä arvo ei koskaan muutu. React käyttää tätä arvoa vain varmuusarvona, jos se ei löydä vastaavaa tarjoajaa yläpuolelta.
215
216
216
-
To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context)
217
+
Jotta konteksti muuttuisi ajan myötä, [lisää tila ja kääri komponentit kontekstin tarjoajaan.](/reference/react/useContext#updating-data-passed-via-context)
0 commit comments