Contextとは
Contextとは「状態」と「状態を変更するメソッド」をpropsを用いずに、アプリケーション全体で取り回せるようにするもの。

右側のC,E,Fとコンテキストを使ってデータをやり取りしてみる。
・src/component/ComponentC.js
src/component/ComponentE.js
src/component/ComponentF.js
を作成する。
・それぞれのファイルにてrfceスニペット
・App.jsにComponentCをインポート
・ComponentCにComponentEをインポート
・ComponentEにComponentFをインポート
App.jsにて、どうComponentAからComponentFへデータを渡すのか。
・ReactからcreateContext,useStateをインポートする。
・createContextを使ってUerContextを作成する。※これは後にComponentFでインポートするのでエクスポートしとく
・useStateを使ってuserオブジェクトを作成する
・Providerを作成する。
・valueを用意
・ProviderでComponentを囲い、囲ったComponent、階層Componentでセットしたvalueを参照できる。
次はComponetnFに移る
・ComponentFの中で、先ほど作成したuserContextをAppコンポーネントよりインポートする。
・userContextを使ってConsumerを作成する。
・Consumerの中で先程セットしたvalueを参照できる。
App.js
import React, {createContext, useState} from 'react';
import './App.css';
import ComponentC from './components/ComponentC';
export const UserContext = createContext()
function App() {
const [user, setUser] = useState({name: 'hayato', age: '27'})
return (
<div className="App">
<UserContext.Provider value={user}>
<ComponentC />
</UserContext.Provider>
</div>
);
}
export default App;
ComponentC.js
import React from 'react'
import ComponentE from './ComponentE';
function ComponentC() {
return (
<div>
<ComponentE />
</div>
)
}
export default ComponentC
ComponentE.js
import React from 'react'
import ComponentF from './ComponentF';
function ComponentE() {
return (
<div>
<ComponentF />
</div>
)
}
export default ComponentE
ComponentF.js
import React from 'react'
import {UserContext} from '../App'
function ComponentF() {
return (
<div>
<UserContext.Consumer>
{
user => {
return <div>{user.name}</div>
}
}
</UserContext.Consumer>
</div>
)
}
export default ComponentF
そうすると、Appコンポーネントで定義されたユーザーデータがComponentFで参照され、画面に名前が表示される。
複数のコンテキストを扱う
・App.jsにて、languageContextとlanguagepropertiesを用意する。
・Providerを用意し、valueの中にlanguageをセットする。
・ネストすることで複数のコンテキストを扱える。
ComponentFへ
UserContext,LanguageContextを読み込む
UserConsumerの中にlanguageConsumerをネストさせる。
先程セットしたvalueを読み込む
App.js
import React, {createContext, useState} from 'react';
import './App.css';
import ComponentC from './components/ComponentC';
export const UserContext = createContext()
export const LanguageContext = createContext()
function App() {
const [user, setUser] = useState({name: 'hayato', age: '27'})
const [language, setLanguage] = useState('日本語')
return (
<div className="App">
<UserContext.Provider value={user}>
<LanguageContext.Provider value={language}>
<ComponentC />
</LanguageContext.Provider>
</UserContext.Provider>
</div>
);
}
export default App;
ComponentF.js
import React from 'react'
import {UserContext, LanguageContext} from '../App'
function ComponentF() {
return (
<div>
<UserContext.Consumer>
{
user => {
return(
<LanguageContext.Consumer>
{
language => {
return <div>{user.name}: {language}</div>
}
}
</LanguageContext.Consumer>
)
}
}
</UserContext.Consumer>
</div>
)
}
export default ComponentF
画面には
hayato: 日本語
と表示される。
このようにuserContextで渡したvalue、languageContextで渡したvalueもComponentFで参照し表示することができる。
Contextの利用にはこのようにProvider、Consumerを使う方法がある。
useContextを使う
App.jsにて、useContextを使う場合でもProviderを使って値を渡す方法は変わらない。
ComponentF.jsにて、ReactからuseContextをインポートする。
useContextの引数にコンテキストを渡すことによって、先程Providerで渡したvalueの値を変数に代入することが出来る。
ComponentF.js
import React,{useContext} from 'react'
import {UserContext, LanguageContext} from '../App'
function ComponentF() {
const user = useContext(UserContext)
const language = useContext(LanguageContext)
return (
<div>
<div>{user.name}: {language}</div>
{/* <UserContext.Consumer>
{
user => {
return(
<LanguageContext.Consumer>
{
language => {
return <div>{user.name}: {language}</div>
}
}
</LanguageContext.Consumer>
)
}
}
</UserContext.Consumer> */}
</div>
)
}
export default ComponentF
先ほどと同じように表示される。
このようにuseContextを使うことによって、Contextをよりシンプルにわかりやすく使えるようになる。