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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA