Skip to content

Commit 8dc7f4a

Browse files
authored
Merge pull request #11 from reactjs/translate-createContext
Translate 'createContext'
2 parents a8a002f + 9b55b10 commit 8dc7f4a

File tree

1 file changed

+39
-38
lines changed

1 file changed

+39
-38
lines changed

src/content/reference/react/createContext.md

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: createContext
44

55
<Intro>
66

7-
`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read.
7+
`createContext` rajapinnan avulla voit luoda [kontekstin](/learn/passing-data-deeply-with-context), jota komponentit voivat tarjota tai lukea.
88

99
```js
1010
const SomeContext = createContext(defaultValue)
@@ -16,38 +16,38 @@ const SomeContext = createContext(defaultValue)
1616

1717
---
1818

19-
## Reference {/*reference*/}
19+
## Referenssi {/*reference*/}
2020

2121
### `createContext(defaultValue)` {/*createcontext*/}
2222

23-
Call `createContext` outside of any components to create a context.
23+
Kutsu `createContext` -funktiota komponenttien ulkopuolella luodaksesi kontekstin.
2424

2525
```js
2626
import { createContext } from 'react';
2727

2828
const ThemeContext = createContext('light');
2929
```
3030

31-
[See more examples below.](#usage)
31+
[Katso lisää esimerkkejä alapuolelta.](#käyttö)
3232

33-
#### Parameters {/*parameters*/}
33+
#### Parametrit {/*parameters*/}
3434

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ä.
3636

37-
#### Returns {/*returns*/}
37+
#### Palautukset {/*returns*/}
3838

39-
`createContext` returns a context object.
39+
`createContext` palauttaa kontekstiolion.
4040

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:
4242

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.
4545

4646
---
4747

4848
### `SomeContext.Provider` {/*provider*/}
4949

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:
5151

5252
```js
5353
function App() {
@@ -61,19 +61,19 @@ function App() {
6161
}
6262
```
6363

64-
#### Props {/*provider-props*/}
64+
#### Propsit {/*provider-props*/}
6565

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.
6767

6868
---
6969

7070
### `SomeContext.Consumer` {/*consumer*/}
7171

72-
Before `useContext` existed, there was an older way to read context:
72+
Ennen kuin `useContext` oli olemassa, oli vanhempi tapa lukea konteksti:
7373

7474
```js
7575
function Button() {
76-
// 🟡 Legacy way (not recommended)
76+
// 🟡 Vanha tapa (ei suositella)
7777
return (
7878
<ThemeContext.Consumer>
7979
{theme => (
@@ -84,29 +84,29 @@ function Button() {
8484
}
8585
```
8686

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:**
8888

8989
```js
9090
function Button() {
91-
//Recommended way
91+
//Suositeltu tapa
9292
const theme = useContext(ThemeContext);
9393
return <button className={theme} />;
9494
}
9595
```
9696

97-
#### Props {/*consumer-props*/}
97+
#### Propsit {/*consumer-props*/}
9898

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.
100100

101101
---
102102

103-
## Usage {/*usage*/}
103+
## Käyttö {/*usage*/}
104104

105-
### Creating context {/*creating-context*/}
105+
### Kontekstin luominen {/*creating-context*/}
106106

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.
108108

109-
Call `createContext` outside any components to create one or more contexts.
109+
Kutsu `createContext` -funktiota komponenttien ulkopuolella luodaksesi yhden tai useamman kontekstin.
110110

111111
```js [[1, 3, "ThemeContext"], [1, 4, "AuthContext"], [3, 3, "'light'"], [3, 4, "null"]]
112112
import { createContext } from 'react';
@@ -115,7 +115,8 @@ const ThemeContext = createContext('light');
115115
const AuthContext = createContext(null);
116116
```
117117

118-
`createContext` returns a <CodeStep step={1}>context object</CodeStep>. Components can read context by passing it to [`useContext()`](/reference/react/useContext):
118+
`createContext` palauttaa <CodeStep step={1}>kontekstiolion</CodeStep>.
119+
Komponentit voivat lukea kontekstin välittämällä sen [`useContext()`](/reference/react/useContext) -hookille:
119120

120121
```js [[1, 2, "ThemeContext"], [1, 7, "AuthContext"]]
121122
function Button() {
@@ -129,9 +130,9 @@ function Profile() {
129130
}
130131
```
131132

132-
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.
133+
Oletuksena arvot, jotka ne saavat, ovat <CodeStep step={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.
133134

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:**
135136

136137
```js {8-9,11-12}
137138
function App() {
@@ -150,15 +151,15 @@ function App() {
150151
}
151152
```
152153

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.
154155

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)
156157

157158
---
158159

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*/}
160161

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:
162163

163164
```js {4-5}
164165
// Contexts.js
@@ -168,7 +169,7 @@ export const ThemeContext = createContext('light');
168169
export const AuthContext = createContext(null);
169170
```
170171

171-
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:
172173

173174
```js {2}
174175
// Button.js
@@ -196,22 +197,22 @@ function App() {
196197
}
197198
```
198199

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)
200201

201202
---
202203

203-
## Troubleshooting {/*troubleshooting*/}
204+
## Vianmääritys {/*troubleshooting*/}
204205

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*/}
206207

207208

208-
Code like this specifies the *default* context value:
209+
Seuraavanlainen koodi määrittää *oletusarvon* kontekstin arvolle:
209210

210211
```js
211212
const ThemeContext = createContext('light');
212213
```
213214

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.
215216

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)
217218

0 commit comments

Comments
 (0)