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
+
`createContext`をコンポーネントの外部で呼び出してコンテクストを作成します。
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
+
[さらに例を見る](#usage)
32
32
33
-
#### Parameters {/*parameters*/}
33
+
#### 引数 {/*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.
**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:
*`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.
*`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.
`createContext`returns a <CodeStepstep={1}>context object</CodeStep>. Components can read context by passing it to [`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.
Context is useful because you can **provide other, dynamic values from your components:**
134
+
コンテクストが便利なのは、**コンポーネントから動的な値を提供できる**からです：
135
135
136
136
```js {8-9,11-12}
137
137
functionApp() {
@@ -150,15 +150,15 @@ function App() {
150
150
}
151
151
```
152
152
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.
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:
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:
0 commit comments