投稿者: 
React学習ちまちま開始。
自分向けの備忘録。
コンテキストを使用する場面
Reactでは、propsが親コンポーネントから子コンポーネントへ情報伝達をするのが基本だが、コンポーネントの階層が深くなってくると、情報のバケツリレーが発生してしまう。
コンテキストを使用すれば、上位コンポーネントで用意された値を子孫コンポーネントで参照することが可能となる。
一般的には、ファイルとしても独立しておくのが望ましい。
コンテキストにてグローバルな値を管理してみる
①最上位コンポーネントにてコンテキストの準備
コンテキストは値を共有すべき、最上位のコンポーネントで準備する。（createContext）
ここで用意されるのはコンテキストを利用するための
・Context.Providerコンポーネント（コンテキストに値を引き渡す）
・Context.Consumerコンポーネント（コンテキストの変更を受け取る）
useContextの挙動としては、親コンポーネントを上から順々に見ていって、Providerが見つかれば、そこに設定されているvalueを取得する。見つからない場合は、createContextの初期値に設定された値を見に行って取得する。
import { createContext, useState } from "react";
import Child from "./components/Child";
import OtherChild from "./components/OtherChild";
// Providerが見つからない場合はcreateContextに設定されている初期値を見にいく
export const MyContext = createContext();
const Example = () => {
const [state, setState] = useState(0);
return (
// Providerで囲まれたコンポーネントはuseContextを通して値を取得することができることになる
<MyContext.Provider value={[state, setState]}>
<Child />
<OtherChild />
</MyContext.Provider>
);
};
export default Example;②更新用関数を受け取り設定する
useContextを通して、親コンポーネントで設定してあったuseStateの更新用関数を受け取り、更新内容を設定する。
import { useContext } from "react";
import { MyContext } from "../Example";
const OtherChild = () => {
// 親コンポーネントで設定したsetState（配列の1番目）のみを取得
const [, setState] = useContext(MyContext);
const clickHandler = (e) => {
setState((prev) => prev + 1);
};
return (
<div style={{ border: "1px solid black" }}>
<h3>他の子コンポーネント</h3>
<button onClick={clickHandler}>+</button>
</div>
);
};
export default OtherChild;③孫コンポーネントで値を受け取る
import GrandChild from "./GrandChild";
const Child = () => (
<div style={{ border: "1px solid black", padding: 10 }}>
<h3>子コンポーネント</h3>
<GrandChild />
</div>
);
export default Child;import { useContext } from "react";
import { MyContext } from "../Example";
const GrandChild = () => {
// 親コンポーネントで設定したState（配列の0番目）のみを取得
const [value] = useContext(MyContext);
return (
<div style={{ border: "1px solid black" }}>
<h3>孫コンポーネント</h3>
{value}
</div>
);
};
export default GrandChild;OtherChild.jsで発生するイベントの結果を、孫コンポーネントで受け取り、表示する。
【参考】
・Udemy：【2024年最新】React(v18)完全入門ガイド
・React実践入門
c.sakyou