3階層以上になってくるとpropsをバケツリレーすることになります。親から孫に値を渡すときに一度子を挟まなくてはなりません。これを回避する仕組みがuseContextになります。
| 種別 | 解説 |
| Contextオブジェクト | React.createContext()の返り値 |
| Providerコンポーネント | Contextオブジェクトが保持するコンポーネント |
| Consumerコンポーネント | useContext()を利用時にContextオブジェクトの値を取得するコンポーネント |
useContextのメリット
useContextを使うとUIとロジックを分離することができます。下記のようなメリットがあります。
- propsのバケツリレーが無くなる（親から孫へ直接値を渡せる）
- 複数のコンポーネントで同じ状態を操作できる
- ステートとイベントハンドラーを１ヶ所で管理できる
ファイル構成
- components ディレクトリ
- –B.js
- –C.js
- contexts ディレクトリ
- –ContextTest.js
- Appjs ファイル
「src」ディレクトリの直下に「contexts」ディレクトリを作ります。ここでcontextを管理します。
|
0 1 2 3 4 5 |
import {createContext} from 'react' const ContextTest = createContext() export default ContextTest |
ContextTestという変数を作成し、createContext()関数でContextオブジェクトを代入しています。export default ContextTest を記載し、他で使えるようにします。これでcontextを使う下準備は完了です。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
import './App.css'; import ContextTest from './contexts/ContextTest'; import B from './components/B'; function App() { return ( <ContextTest.Provider value={'AからCに値を渡したものを表示'} > <B /> </ContextTest.Provider> ); } export default App; |
「import ContextTest from ‘./contexts/ContextTest’;」
App.js」でcontextが使えるように、contextディレクトリ内に作成した「ContextTest.js」をインポートします。
「import B from ‘./components/B’;」B.jsを使えるようにこちらもインポート。
このような記載になります。<ContextTest.Provider value={‘AからCに値を渡したものを表示’} >
returnの中でContextを使いたい部分を <ContextTest.Provider></ContextTest.Provider>で囲います。今回はここからCに値を直接渡したいので、渡す値をvalueで設定しています。
App.jsでBを読み込む。BでさらにCを読み込む。値はAからCに渡すという流れになるので、
<ContextTest.Provider></ContextTest.Provider>の中に<B />を記載します。
次にB.jsを作成します。
B.jsはC.jsを読み込んで表示するだけです。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react' import C from './C' const B = () => { return ( <div> <h3>Bコンポーネントの表示</h3> <C /> </div> ) } export default B |
「C.js]にはApp.jsからContextで受け取った値を表示するプログラムを記載します。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from 'react' import {useContext} from 'react' import ContextTest from '../contexts/ContextTest' const C = () => { const value = useContext(ContextTest) return ( <div> {value} </div> ) } export default C |
まずはcontextをインポートします。「import ContextTest from ‘../contexts/ContextTest’」
「const value = useContext(ContextTest)」
CotextTetをvalueという変数に代入します。
returnの中の表示させたい部分に [value]を記載します。
これでApp.jsで設定した値を直接Cに表示できるようになります。
（表示結果）
