Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
jp-knj committed Jul 15, 2023
1 parent bba7db1 commit a6a34fd
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions src/content/reference/react/useContext.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const value = useContext(SomeContext)

---

## リファレンス {/reference/} {/*リファレンス-reference*/}
## リファレンス {/*reference*/}

### `useContext(SomeContext)` {/*usecontext*/}

Expand All @@ -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 は、あるコンテクストを読み込んだコンポーネントが変更されると、自動的に再レンダーします。
Expand Down Expand Up @@ -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 を <CodeStep step={2}>context value</CodeStep> としてプロバイダに渡します。
Expand All @@ -199,7 +199,7 @@ function MyPage() {
<Recipes titleText="Examples of updating context" titleId="examples-basic">
#### 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 を使用しているすべてのコンポーネントが再レンダーされます。
Expand Down Expand Up @@ -303,7 +303,7 @@ function Button({ children }) {
<Solution />
#### コンテクストを通じてオブジェクトを更新する {/updating-an-object-via-context/} {/*コンテクストを通じてオブジェクトを更新する-updating-an-object-via-context*/}
#### コンテクストを通じてオブジェクトを更新する {/*updating-an-object-via-context*/}
この例では、オブジェクトを保持する `currentUser` という状態変数があります。`{ currentUser, setCurrentUser }` を 1 つのオブジェクトに組み合わせて、その中の `value={}` を介してコンテクストを下に渡します。これにより、`LoginButton` などの下位の任意のコンポーネントが `currentUser``setCurrentUser` を読み込み、必要に応じて `setCurrentUser` を呼び出すことができます。
Expand Down

0 comments on commit a6a34fd

Please sign in to comment.