@@ -4,7 +4,7 @@ title: コンテクスト
4
4
permalink : docs/context.html
5
5
---
6
6
7
- コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーを通してデータを渡す方法を提供します 。
7
+ コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します 。
8
8
9
9
典型的な React アプリケーションでは、データは props を通してトップダウン(親から子)で渡されますが、アプリケーション内の多くのコンポーネントから必要とされる特定のタイプのプロパティ(例: ロケール設定、UI テーマ)にとっては面倒です。コンテクストはツリーの各階層で明示的にプロパティを渡すことなく、コンポーネント間でこれらの様な値を共有する方法を提供します。
10
10
@@ -28,15 +28,15 @@ permalink: docs/context.html
28
28
29
29
` embed:context/motivation-problem.js `
30
30
31
- コンテクストを使用することで、中間の要素を通してプロパティを渡すことを避けることができます 。
31
+ コンテクストを使用することで、中間の要素群を経由してプロパティを渡すことを避けることができます 。
32
32
33
33
` embed:context/motivation-solution.js `
34
34
35
35
## コンテクストを使用する前に {#before-you-use-context}
36
36
37
- コンテクストは主に、いくつかのデータがネストしている階層が違う * 多く* のコンポーネントからアクセスが必要な時に使用されます 。コンテクストはコンポーネントの再利用をより難しくする為、慎重に利用してください。
37
+ コンテクストは主に、何らかのデータが、ネストレベルの異なる * 多く* のコンポーネントからアクセスできる必要がある時に使用されます 。コンテクストはコンポーネントの再利用をより難しくする為、慎重に利用してください。
38
38
39
- ** もし多くの階層を通していくつかのプロパティを渡すことを避けたいだけであれば、 [ コンポーネント コンポジション ] ( /docs/composition-vs-inheritance.html ) は多くの場合、コンテクストよりシンプルな解決策です。**
39
+ ** もし多くの階層を経由していくつかの props を渡すことを避けたいだけであれば、 [ コンポーネントコンポジション ] ( /docs/composition-vs-inheritance.html ) は多くの場合、コンテクストよりシンプルな解決策です。**
40
40
41
41
例えば、深くネストされた ` Link ` と ` Avatar ` コンポーネントがプロパティを読み取ることが出来るように、` user ` と ` avatarSize ` プロパティをいくつかの階層下へ渡す ` Page ` コンポーネントを考えてみましょう。
42
42
@@ -79,7 +79,7 @@ function Page(props) {
79
79
80
80
この変更により、一番上の Page コンポーネントだけが、` Link ` と ` Avatar ` コンポーネントの ` user ` と ` avatarSize ` の使い道について知る必要があります。
81
81
82
- この* 制御の反転* はアプリケーションを通して渡す必要のあるプロパティの量を減らし 、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します。
82
+ この* 制御の反転* はアプリケーション内で取り回す必要のあるプロパティの量を減らし 、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します。
83
83
84
84
コンポーネントに対して 1 つの子までという制限はありません。複数の子を渡したり、子のために複数の別々の「スロット」を持つことさえできます。[ ドキュメントはここにあります。] ( /docs/composition-vs-inheritance.html#containment )
85
85
@@ -189,7 +189,7 @@ class MyClass extends React.Component {
189
189
190
190
コンテクストの変更を購読する React コンポーネントです。[ 関数コンポーネント] ( /docs/components-and-props.html#function-and-class-components ) 内でコンテクストを購読することができます。
191
191
192
- [ function as a child] ( /docs/render-props.html#using-props-other-than-render ) が必要です。この関数は現在のコンテクストの値を受け取り、React ノードを返します。この関数に渡される引数 ` value ` は、このコンテクストのツリー内の上位の一番近いプロバイダの ` value ` プロパティと等しくなります。このコンテクスト用のプロバイダが上位に存在しない場合、引数の ` value ` は ` createContext() ` から渡された ` defaultValue ` と等しくなります。
192
+ [ function as a child] ( /docs/render-props.html#using-props-other-than-render ) が必要です。この関数は現在のコンテクストの値を受け取り、React ノードを返します。この関数に渡される引数 ` value ` は、ツリー内の上位で一番近いこのコンテクスト用のプロバイダの ` value ` プロパティと等しくなります。このコンテクスト用のプロバイダが上位に存在しない場合、引数の ` value ` は ` createContext() ` から渡された ` defaultValue ` と等しくなります。
193
193
194
194
> 補足
195
195
>
0 commit comments