前回までの状態
useEffectについて学習した。
今回の目的
useContextについて
useContext
値を受け渡す際に使用する。
propsを使用してコンポーネントからコンポーネントへ値を受け渡す場合、親コンポーネントから子コンポーネントへのバケツリレーになる。しかしuseContextを使用すると直接値を受け渡すことができる。
宣言
const Contextの変数名 = React.createContext(Contextの初期値);
受け渡し
<Contextの変数名.Provider value=受け渡す値>
<Contextを使用するコンポーネント>
</Contextの変数名.Provider>
手順
前回作成したindex.tsxを以下のように変更、追加する。
import ReactDOM from 'react-dom';
import { useState, useEffect, useContext } from 'react';//useContext追加
import React from 'react';//追加
const Name = React.createContext('')//追加
const TextOutput = () => {
const name = useContext(Name);//追加
return (
<p>Hello, {name}!</p>//変更
);
}
//コンポーネント追加
const Space = () => {
return (
<TextOutput />
);
}
const TextInput = () => {
const [str, setStr] = useState('初期値');
useEffect(() => {
document.title = `input is ${str} !`;
});
return (
<div>
<form >
<label>
入力欄<br />
<textarea
value={str}
onChange={event => setStr(event.target.value)}
/>
</label>
</form>
<Name.Provider value={str}>{/* 追加 */}
<Space />{/* 変更 */}
</Name.Provider>{/* 追加 */}
</div>
);
}
ReactDOM.render(
<TextInput />,
document.getElementById('root')
);
いつも通り、npm startでプロジェクトを実行する。
'Hello, [入力した文字列]!'が表示されれば成功。
解説
import { useState, useEffect, useContext } from 'react';//useContext追加
import React from 'react';//追加
useContextを使用するため、インポートしている。
const Name = React.createContext('')//追加
Nameを''で初期化し宣言している。
const TextOutput = () => {
const name = useContext(Name);//追加
return (
<p>Hello, {name}!</p>//変更
);
}
Nameの値をuseContextを使用してpropsを使用することなくnameに受け取り、表示させている。
//コンポーネント追加
const Space = () => {
return (
<TextOutput />
);
}
useContextを使用するのが孫コンポーネントでも問題ないことを明らかにするために追加したコンポーネント。
<Name.Provider value={str}>{/* 追加 */}
<Space />{/* 変更 */}
</Name.Provider>{/* 追加 */}
Space以下のコンポーネントで、値がstrのNameを受け渡すことをProviderを使用して宣言している。
要約
useContextを使用することでpropsなしの値受け渡しが可能になる。
次
- 作成中
2021/11追記:転職できました