diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index e655719ff..3ef4bb77a 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -16,7 +16,7 @@ const value = useContext(SomeContext) --- -## リファレンス {/reference/} {/*リファレンス-reference*/} +## リファレンス {/*reference*/} ### `useContext(SomeContext)` {/*usecontext*/} @@ -32,11 +32,11 @@ function MyComponent() { [さらに例を見る](#usage) -#### パラメータ {/parameters/} {/*パラメータ-parameters*/} +#### 引数 {/*parameters*/} * `SomeContext`: 事前に [`createContext`](/reference/react/createContext) で作成した context になります。context 自体は情報を保持しておらず、コンポーネントから提供したり、読み取ったりできる情報の種類を表しているに過ぎません。 -#### 返り値 {/returns/} {/*返り値-returns*/} +#### 返り値 {/*returns*/} `useContext` は呼び出し元のコンポーネントのコンテクストの値を返します。この値は、ツリーの中で呼び出し元のコンポーネントに最も近い `SomeContext.Provider` に渡された `value` として決定される。そのようなプロバイダが存在しない場合は、そのコンテクストの [`createContext`](/reference/react/createContext) に渡した `defaultValue` が返されます。返される値は常に最新のものです。React は、あるコンテクストを読み込んだコンポーネントが変更されると、自動的に再レンダーします。 @@ -175,7 +175,7 @@ function Button({ children }) { --- -### context を介したデータの更新 {/updating-data-passed-via-context/} {/*context-を介したデータの更新-updating-data-passed-via-context*/} +### context を介したデータの更新 {/*updating-data-passed-via-context*/} 多くの場合、時間とともに context が変更されることが望まれます。context を更新するためには、[state.](/reference/react/useState) と組み合わせます。親コンポーネントで state 変数を宣言し、その現在の state を context value としてプロバイダに渡します。 @@ -199,7 +199,7 @@ function MyPage() { -#### contextを介して値を更新する {/updating-a-value-via-context/} {/*contextを介して値を更新する-updating-a-value-via-context*/} +#### contextを介して値を更新する {/*updating-a-value-via-context*/} この例では、`MyApp` コンポーネントが `state` 変数を保持し、それを `ThemeContext` プロバイダに渡します。`"Dark mode"`のチェックボックスをチェックすると、state が更新されます。提供される値を変更すると、context を使用しているすべてのコンポーネントが再レンダーされます。 @@ -303,7 +303,7 @@ function Button({ children }) { -#### コンテクストを通じてオブジェクトを更新する {/updating-an-object-via-context/} {/*コンテクストを通じてオブジェクトを更新する-updating-an-object-via-context*/} +#### コンテクストを通じてオブジェクトを更新する {/*updating-an-object-via-context*/} この例では、オブジェクトを保持する `currentUser` という状態変数があります。`{ currentUser, setCurrentUser }` を 1 つのオブジェクトに組み合わせて、その中の `value={}` を介してコンテクストを下に渡します。これにより、`LoginButton` などの下位の任意のコンポーネントが `currentUser` と `setCurrentUser` を読み込み、必要に応じて `setCurrentUser` を呼び出すことができます。