From 4a1d04a3c101a76944872ca266a97ba98cc74738 Mon Sep 17 00:00:00 2001 From: natsuokawai Date: Thu, 20 Jul 2023 01:32:39 +0900 Subject: [PATCH 1/7] Translate createContext --- src/content/reference/react/createContext.md | 69 ++++++++++---------- 1 file changed, 34 insertions(+), 35 deletions(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index a653633c1..6abe009de 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -4,7 +4,7 @@ title: createContext -`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read. +`createContext` は、コンポーネントが提供または読み取りできる [コンテクスト](/learn/passing-data-deeply-with-context)を作成するための関数です。 ```js const SomeContext = createContext(defaultValue) @@ -16,11 +16,11 @@ const SomeContext = createContext(defaultValue) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `createContext(defaultValue)` {/*createcontext*/} -Call `createContext` outside of any components to create a context. +`createContext` をコンポーネントの外部で呼び出してコンテクストを作成します。 ```js import { createContext } from 'react'; @@ -28,26 +28,26 @@ import { createContext } from 'react'; const ThemeContext = createContext('light'); ``` -[See more examples below.](#usage) +[下にさらに例があります。](#usage) -#### Parameters {/*parameters*/} +#### パラメータ {/*parameters*/} -* `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. +* `defaultValue`: コンポーネントがコンテクストを読み取るときに、その上のツリー内で対応するコンテクストプロバイダがない場合にコンテクストが持つ値です。デフォルト値が必要ない場合には `null` を指定します。デフォルト値は "最後の手段" として使われるように意図されています。これは静的な値であり、時間とともに変更されません。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`createContext` returns a context object. +`createContext` はコンテクストオブジェクトを返します。 -**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: +**コンテクストオブジェクト自体は情報を持っていません**。他のコンポーネントがどのコンテクストを読み取るか、または提供するかを表します。通常、上位のコンポーネントで `SomeContext.Provider` を使用してコンテクストの値を指定し、下位のコンポーネントで `useContext(SomeContext)` を呼び出してコンテクストを読み取ります。コンテクストオブジェクトにはいくつかのプロパティがあります： -* `SomeContext.Provider` lets you provide the context value to components. -* `SomeContext.Consumer` is an alternative and rarely used way to read the context value. +* `SomeContext.Provider` では、コンポーネントにコンテクストの値を提供できます。 +* `SomeContext.Consumer` は、コンテクストの値を読み取るための方法ですが、あまり使用されません。 --- ### `SomeContext.Provider` {/*provider*/} -Wrap your components into a context provider to specify the value of this context for all components inside: +コンポーネントをコンテクストプロバイダでラップすると、内部のコンポーネントに対してこのコンテクストの値を指定できます。 ```js function App() { @@ -63,13 +63,13 @@ function App() { #### Props {/*provider-props*/} -* `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. +* `value`: プロバイダ内のコンテクストを読み取るコンポーネントに渡したい値です。どんなに深くても構いません。コンテクストの値は任意の型にすることができます。プロバイダ内で `useContext(SomeContext)` を呼び出しているコンポーネントは、それより上位の最も内側の対応するコンテクストプロバイダの `value` を受け取ります。 --- ### `SomeContext.Consumer` {/*consumer*/} -Before `useContext` existed, there was an older way to read context: +`useContext` が存在する前には、コンテクストを読み取る古い方法がありました： ```js function Button() { @@ -84,7 +84,7 @@ function Button() { } ``` -Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:** +この古い方法はまだ動作しますが、**新しく書かれたコードは `useContext()` を使ってコンテクストを読み取るべきです：** ```js function Button() { @@ -96,17 +96,17 @@ function Button() { #### Props {/*consumer-props*/} -* `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. +* `children`: 関数です。React は、`useContext()` と同じアルゴリズムによって定まる現在のコンテクスト値で関数を呼び出し、その関数から返される結果をレンダーします。親コンポーネントからのコンテクストが変更されると、React はこの関数を再実行し、UI を更新します。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Creating context {/*creating-context*/} +### コンテクストの作成 {/*creating-context*/} -Context lets components [pass information deep down](/learn/passing-data-deeply-with-context) without explicitly passing props. +コンテクストを利用することで、明示的に props を渡さずに、コンポーネントに深くまで [情報を渡す](/learn/passing-data-deeply-with-context)ことができます。 -Call `createContext` outside any components to create one or more contexts. +コンポーネントの外部で `createContext` を呼び出して、コンテクストを 1 つまたは複数個作成します。 ```js [[1, 3, "ThemeContext"], [1, 4, "AuthContext"], [3, 3, "'light'"], [3, 4, "null"]] import { createContext } from 'react'; @@ -115,7 +115,7 @@ const ThemeContext = createContext('light'); const AuthContext = createContext(null); ``` -`createContext` returns a context object. Components can read context by passing it to [`useContext()`](/reference/react/useContext): +`createContext` は コンテクストオブジェクト を返します。それを `useContext()` に渡すことで、コンポーネントからコンテクストを読み取ることができます： ```js [[1, 2, "ThemeContext"], [1, 7, "AuthContext"]] function Button() { @@ -129,9 +129,9 @@ function Profile() { } ``` -By default, the values they receive will be the default values 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:** +コンテクストが便利なのは、**コンポーネントから動的な値を提供できる**からです： ```js {8-9,11-12} function App() { @@ -150,15 +150,15 @@ function App() { } ``` -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. +これで、`Page` コンポーネントとその内部のすべてのコンポーネントは、どんなに深くても、渡されたコンテクストの値を "見る" ことができます。渡されたコンテクストの値が変更されると、React はコンテクストを読み取るコンポーネントを再レンダーします。 -[Read more about reading and providing context and see examples.](/reference/react/useContext) +[コンテクストの読み取りと提供、例についてさらに読む。](/reference/react/useContext) --- -### Importing and exporting context from a file {/*importing-and-exporting-context-from-a-file*/} +### ファイルからのコンテクストのインポートとエクスポート {/*importing-and-exporting-context-from-a-file*/} -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: +異なるファイルにあるコンポーネントが同じコンテクストにアクセスする必要があることがよくあります。これが、別のファイルでコンテクストを宣言することが一般的な理由です。他のファイルでコンテクストを利用できるようにするために、[`export` 文](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export)を使用できます： ```js {4-5} // Contexts.js @@ -168,7 +168,7 @@ export const ThemeContext = createContext('light'); export const AuthContext = createContext(null); ``` -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: +他のファイルで宣言されたコンポーネントは、[`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) 文を使用して、このコンテクストを読み取ったり、提供したりすることができます： ```js {2} // Button.js @@ -196,22 +196,21 @@ function App() { } ``` -This works similar to [importing and exporting components.](/learn/importing-and-exporting-components) +これは [コンポーネントのインポートとエクスポート](/learn/importing-and-exporting-components)と同様に動作します。 --- -## Troubleshooting {/*troubleshooting*/} +## トラブルシューティング {/*troubleshooting*/} -### I can't find a way to change the context value {/*i-cant-find-a-way-to-change-the-context-value*/} +### コンテクストの値を変更する方法が見つからない {/*i-cant-find-a-way-to-change-the-context-value*/} - -Code like this specifies the *default* context value: +このようなコードは *デフォルト* のコンテクストの値を指定します： ```js const ThemeContext = createContext('light'); ``` -This value never changes. React only uses this value as a fallback if it can't find a matching provider above. +この値は決して変わりません。React は、対応するプロバイダを上位のコンポーネントで見つけられない場合にのみ、この値をフォールバックとして使用します。 -To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context) +コンテクストを時間とともに変更するためには、[state を追加し、コンポーネントをコンテクストプロバイダでラップ](/reference/react/useContext#updating-data-passed-via-context)します。 From 1c518731eb366cb034c09a9f52ca5dd193c44c1d Mon Sep 17 00:00:00 2001 From: natsuokawai Date: Thu, 20 Jul 2023 13:08:29 +0900 Subject: [PATCH 2/7] fix some styles --- src/content/reference/react/createContext.md | 27 ++++++++++---------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 6abe009de..2040d5c3d 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -4,7 +4,7 @@ title: createContext -`createContext` は、コンポーネントが提供または読み取りできる [コンテクスト](/learn/passing-data-deeply-with-context)を作成するための関数です。 +`createContext` は、コンポーネントが提供または読み取りできる[コンテクスト](/learn/passing-data-deeply-with-context)を作成するための関数です。 ```js const SomeContext = createContext(defaultValue) @@ -28,11 +28,11 @@ import { createContext } from 'react'; const ThemeContext = createContext('light'); ``` -[下にさらに例があります。](#usage) +[さらに例を見る](#usage) -#### パラメータ {/*parameters*/} +#### 引数 {/*parameters*/} -* `defaultValue`: コンポーネントがコンテクストを読み取るときに、その上のツリー内で対応するコンテクストプロバイダがない場合にコンテクストが持つ値です。デフォルト値が必要ない場合には `null` を指定します。デフォルト値は "最後の手段" として使われるように意図されています。これは静的な値であり、時間とともに変更されません。 +* `defaultValue`: コンポーネントがコンテクストを読み取るときに、その上のツリー内で対応するコンテクストプロバイダがない場合にコンテクストが持つ値です。デフォルト値が必要ない場合は `null` を指定します。デフォルト値は "最後の手段" として使われるように意図されています。これは静的な値であり、時間とともに変更されません。 #### 返り値 {/*returns*/} @@ -63,7 +63,7 @@ function App() { #### Props {/*provider-props*/} -* `value`: プロバイダ内のコンテクストを読み取るコンポーネントに渡したい値です。どんなに深くても構いません。コンテクストの値は任意の型にすることができます。プロバイダ内で `useContext(SomeContext)` を呼び出しているコンポーネントは、それより上位の最も内側の対応するコンテクストプロバイダの `value` を受け取ります。 +* `value`: このプロバイダの内側（深さに関わらず）にあるコンポーネントがコンテクストを読み取る際に、渡したい値です。コンテクストの値は任意の型にすることができます。プロバイダ内で `useContext(SomeContext)` を呼び出しているコンポーネントは、それより上位かつ最も内側にある対応するコンテクストプロバイダの `value` を受け取ります。 --- @@ -104,7 +104,7 @@ function Button() { ### コンテクストの作成 {/*creating-context*/} -コンテクストを利用することで、明示的に props を渡さずに、コンポーネントに深くまで [情報を渡す](/learn/passing-data-deeply-with-context)ことができます。 +コンテクストを利用することで、明示的に props を渡さずに、コンポーネントに深くまで[情報を渡す](/learn/passing-data-deeply-with-context)ことができます。 コンポーネントの外部で `createContext` を呼び出して、コンテクストを 1 つまたは複数個作成します。 @@ -115,7 +115,7 @@ const ThemeContext = createContext('light'); const AuthContext = createContext(null); ``` -`createContext` は コンテクストオブジェクト を返します。それを `useContext()` に渡すことで、コンポーネントからコンテクストを読み取ることができます： +`createContext` はコンテクストオブジェクトを返します。それを `useContext()` に渡すことで、コンポーネントからコンテクストを読み取ることができます： ```js [[1, 2, "ThemeContext"], [1, 7, "AuthContext"]] function Button() { @@ -129,7 +129,7 @@ function Profile() { } ``` -デフォルトでは、コンポーネントが受け取る値は、コンテクストを作成するときに指定した デフォルトの値 になります。しかし、デフォルトの値は決して変わらないため、これ自体では役に立ちませんね。 +デフォルトでは、コンポーネントが受け取る値は、コンテクストを作成するときに指定したデフォルトの値になります。しかし、デフォルトの値は決して変わらないため、これ自体では役に立ちませんね。 コンテクストが便利なのは、**コンポーネントから動的な値を提供できる**からです： @@ -150,15 +150,15 @@ function App() { } ``` -これで、`Page` コンポーネントとその内部のすべてのコンポーネントは、どんなに深くても、渡されたコンテクストの値を "見る" ことができます。渡されたコンテクストの値が変更されると、React はコンテクストを読み取るコンポーネントを再レンダーします。 +これで、`Page` コンポーネントとその内部のすべてのコンポーネントは、どんなに深くても、渡されたコンテクストの値を「見る」ことができます。渡されたコンテクストの値が変更されると、React はコンテクストを読み取るコンポーネントを再レンダーします。 -[コンテクストの読み取りと提供、例についてさらに読む。](/reference/react/useContext) +[コンテクストの読み取りと提供、例についてさらに読む](/reference/react/useContext) --- ### ファイルからのコンテクストのインポートとエクスポート {/*importing-and-exporting-context-from-a-file*/} -異なるファイルにあるコンポーネントが同じコンテクストにアクセスする必要があることがよくあります。これが、別のファイルでコンテクストを宣言することが一般的な理由です。他のファイルでコンテクストを利用できるようにするために、[`export` 文](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export)を使用できます： +異なるファイルにあるコンポーネントが同じコンテクストにアクセスする必要があることがよくあります。そのため、一般的には別ファイルでコンテクストを宣言します。他のファイルでコンテクストを利用できるようにするために、[`export` 文](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export)を使用できます： ```js {4-5} // Contexts.js @@ -196,7 +196,7 @@ function App() { } ``` -これは [コンポーネントのインポートとエクスポート](/learn/importing-and-exporting-components)と同様に動作します。 +これは[コンポーネントのインポートとエクスポート](/learn/importing-and-exporting-components)と同様に動作します。 --- @@ -204,7 +204,8 @@ function App() { ### コンテクストの値を変更する方法が見つからない {/*i-cant-find-a-way-to-change-the-context-value*/} -このようなコードは *デフォルト* のコンテクストの値を指定します： + +このようなコードは*デフォルト*のコンテクストの値を指定します： ```js const ThemeContext = createContext('light'); From 44f226b6a44e71ec7ffdc9a2d67652c8e8faa1ca Mon Sep 17 00:00:00 2001 From: natsuokawai Date: Thu, 20 Jul 2023 13:15:58 +0900 Subject: [PATCH 3/7] fix translations --- src/content/reference/react/createContext.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 2040d5c3d..d701d760a 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -32,7 +32,7 @@ const ThemeContext = createContext('light'); #### 引数 {/*parameters*/} -* `defaultValue`: コンポーネントがコンテクストを読み取るときに、その上のツリー内で対応するコンテクストプロバイダがない場合にコンテクストが持つ値です。デフォルト値が必要ない場合は `null` を指定します。デフォルト値は "最後の手段" として使われるように意図されています。これは静的な値であり、時間とともに変更されません。 +* `defaultValue`: コンポーネントがコンテクストを読み取るときに、その上のツリー内で対応するコンテクストプロバイダがない場合にコンテクストが持つ値です。デフォルト値が必要ない場合は `null` を指定します。デフォルト値は "最後の手段" として使われるように意図されています。これは静的な値であり、時間が経過しても変化しません。 #### 返り値 {/*returns*/} @@ -213,5 +213,5 @@ const ThemeContext = createContext('light'); この値は決して変わりません。React は、対応するプロバイダを上位のコンポーネントで見つけられない場合にのみ、この値をフォールバックとして使用します。 -コンテクストを時間とともに変更するためには、[state を追加し、コンポーネントをコンテクストプロバイダでラップ](/reference/react/useContext#updating-data-passed-via-context)します。 +コンテクストを時間の経過とともに変化させるには、[state を追加し、コンポーネントをコンテクストプロバイダでラップ](/reference/react/useContext#updating-data-passed-via-context)します。 From 31bda296cf3a579b33f82bbea6fbd080fe19a471 Mon Sep 17 00:00:00 2001 From: natsuokawai Date: Thu, 20 Jul 2023 17:36:09 +0900 Subject: [PATCH 4/7] fix quote style --- src/content/reference/react/createContext.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index d701d760a..49876c513 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -32,7 +32,7 @@ const ThemeContext = createContext('light'); #### 引数 {/*parameters*/} -* `defaultValue`: コンポーネントがコンテクストを読み取るときに、その上のツリー内で対応するコンテクストプロバイダがない場合にコンテクストが持つ値です。デフォルト値が必要ない場合は `null` を指定します。デフォルト値は "最後の手段" として使われるように意図されています。これは静的な値であり、時間が経過しても変化しません。 +* `defaultValue`: コンポーネントがコンテクストを読み取るときに、その上のツリー内で対応するコンテクストプロバイダがない場合にコンテクストが持つ値です。デフォルト値が必要ない場合は `null` を指定します。デフォルト値は「最後の手段」として使われるように意図されています。これは静的な値であり、時間が経過しても変化しません。 #### 返り値 {/*returns*/} From c7fee54934c465acb92048fc1b834483ff4b7a09 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 20 Jul 2023 23:18:49 +0900 Subject: [PATCH 5/7] Restore link that was accidentally removed --- src/content/reference/react/createContext.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 49876c513..0e30a458b 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -96,7 +96,7 @@ function Button() { #### Props {/*consumer-props*/} -* `children`: 関数です。React は、`useContext()` と同じアルゴリズムによって定まる現在のコンテクスト値で関数を呼び出し、その関数から返される結果をレンダーします。親コンポーネントからのコンテクストが変更されると、React はこの関数を再実行し、UI を更新します。 +* `children`: 関数です。React は、[`useContext()`](/reference/react/useContext) と同じアルゴリズムによって定まる現在のコンテクスト値で関数を呼び出し、その関数から返される結果をレンダーします。親コンポーネントからのコンテクストが変更されると、React はこの関数を再実行し、UI を更新します。 --- From ee0789140d62c165cd3805b987ec682ac0624587 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 20 Jul 2023 23:23:05 +0900 Subject: [PATCH 6/7] Restore more links --- src/content/reference/react/createContext.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 0e30a458b..98170e1e9 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -38,7 +38,7 @@ const ThemeContext = createContext('light'); `createContext` はコンテクストオブジェクトを返します。 -**コンテクストオブジェクト自体は情報を持っていません**。他のコンポーネントがどのコンテクストを読み取るか、または提供するかを表します。通常、上位のコンポーネントで `SomeContext.Provider` を使用してコンテクストの値を指定し、下位のコンポーネントで `useContext(SomeContext)` を呼び出してコンテクストを読み取ります。コンテクストオブジェクトにはいくつかのプロパティがあります： +**コンテクストオブジェクト自体は情報を持っていません**。他のコンポーネントが*どの*コンテクストを読み取るか、または提供するかを表します。通常、上位のコンポーネントで [`SomeContext.Provider`](#provider) を使用してコンテクストの値を指定し、下位のコンポーネントで [`useContext(SomeContext)`](/reference/react/useContext) を呼び出してコンテクストを読み取ります。コンテクストオブジェクトにはいくつかのプロパティがあります： * `SomeContext.Provider` では、コンポーネントにコンテクストの値を提供できます。 * `SomeContext.Consumer` は、コンテクストの値を読み取るための方法ですが、あまり使用されません。 @@ -63,7 +63,7 @@ function App() { #### Props {/*provider-props*/} -* `value`: このプロバイダの内側（深さに関わらず）にあるコンポーネントがコンテクストを読み取る際に、渡したい値です。コンテクストの値は任意の型にすることができます。プロバイダ内で `useContext(SomeContext)` を呼び出しているコンポーネントは、それより上位かつ最も内側にある対応するコンテクストプロバイダの `value` を受け取ります。 +* `value`: このプロバイダの内側（深さに関わらず）にあるコンポーネントがコンテクストを読み取る際に、渡したい値です。コンテクストの値は任意の型にすることができます。プロバイダ内で [`useContext(SomeContext)`](/reference/react/useContext) を呼び出しているコンポーネントは、それより上位かつ最も内側にある対応するコンテクストプロバイダの `value` を受け取ります。 --- @@ -84,7 +84,7 @@ function Button() { } ``` -この古い方法はまだ動作しますが、**新しく書かれたコードは `useContext()` を使ってコンテクストを読み取るべきです：** +この古い方法はまだ動作しますが、**新しく書かれたコードは [`useContext()`](/reference/react/useContext) を使ってコンテクストを読み取るべきです：** ```js function Button() { @@ -104,7 +104,7 @@ function Button() { ### コンテクストの作成 {/*creating-context*/} -コンテクストを利用することで、明示的に props を渡さずに、コンポーネントに深くまで[情報を渡す](/learn/passing-data-deeply-with-context)ことができます。 +コンテクストを利用することで、明示的に props を渡さずに、コンポーネントに[深くまで情報を渡す](/learn/passing-data-deeply-with-context)ことができます。 コンポーネントの外部で `createContext` を呼び出して、コンテクストを 1 つまたは複数個作成します。 @@ -115,7 +115,7 @@ const ThemeContext = createContext('light'); const AuthContext = createContext(null); ``` -`createContext` はコンテクストオブジェクトを返します。それを `useContext()` に渡すことで、コンポーネントからコンテクストを読み取ることができます： +`createContext` はコンテクストオブジェクトを返します。それを [`useContext()`](/reference/react/useContext) に渡すことで、コンポーネントからコンテクストを読み取ることができます： ```js [[1, 2, "ThemeContext"], [1, 7, "AuthContext"]] function Button() { From 25ee533c0b30b107c17cdf228541144c453f1c2a Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 20 Jul 2023 23:26:31 +0900 Subject: [PATCH 7/7] Fix capitalization problems --- src/content/reference/react/createContext.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 98170e1e9..23e42d127 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -61,7 +61,7 @@ function App() { } ``` -#### Props {/*provider-props*/} +#### props {/*provider-props*/} * `value`: このプロバイダの内側（深さに関わらず）にあるコンポーネントがコンテクストを読み取る際に、渡したい値です。コンテクストの値は任意の型にすることができます。プロバイダ内で [`useContext(SomeContext)`](/reference/react/useContext) を呼び出しているコンポーネントは、それより上位かつ最も内側にある対応するコンテクストプロバイダの `value` を受け取ります。 @@ -94,7 +94,7 @@ function Button() { } ``` -#### Props {/*consumer-props*/} +#### props {/*consumer-props*/} * `children`: 関数です。React は、[`useContext()`](/reference/react/useContext) と同じアルゴリズムによって定まる現在のコンテクスト値で関数を呼び出し、その関数から返される結果をレンダーします。親コンポーネントからのコンテクストが変更されると、React はこの関数を再実行し、UI を更新します。