React入門 - Part4.2 - 親子間コンポーネントへの値の受け渡し - useContext編

目次

useContextとは

props同様、コンポーネント間でのデータの受け渡しに使用します。
ですが、バケツリレーでは渡しません。

親コンポーネントでの設定

createContext

export const UserCount = React.createContext()

レンダー項目でXXX.Providerで挟みます。

      <UserCount.Provider value={100}>
        <子コンポーネント />
      </UserCount.Provider>

子(孫)コンポーネントでの設定

import

import React,{useContext} from 'react'
import { UserCount } from '../App'

値の取り出し

const count = useContext(UserCount)

これで、親から子、子から孫への値を伝搬しなくても、親から孫へデータを受け渡すことが出来ます。

子(孫)コンポーネントでcontextの更新まで行ってみよう

まず、いつものようにプロジェクトを作成します。

$ npx create-react-app プロジェクト名 --template typescript

プロジェクトに移動して、以下コマンドで初期画面が開くことを確認しておきます。

cd プロジェクト名
yarn start

App.tsx

App.tsxを書き換えます。
子コンポにXXX.Providerで挟み、contextを伝搬できるようにします。

import React, { useState } from "react";
import Child from "./Child";

type ContextType = {
  complain: string;
  setComplain: React.Dispatch<React.SetStateAction<string>>;
};

export const Complain = React.createContext<ContextType>({
  complain: "",
  setComplain: () => {},
});

function App() {
  const [complain, setComplain] = useState("");

  const value = {
    complain,
    setComplain,
  };

  return (
    <div className="App">
      <Complain.Provider value={value}>
        <Child />
      </Complain.Provider>
    </div>
  );
}

export default App;

Child.tsx

子コンポーネントで、親コンポーネントからcompalainというstateとsetComplainというstate設定関数を受け取ります。

import React, { useContext, useState } from "react";
import { Complain } from "./App";

const ComponentC = () => {
  const complain = useContext(Complain)?.complain;
  const setComplain = useContext(Complain)?.setComplain;

  const [text, setText] = useState("");

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  return (
    <div>
      <p>Child Complain</p>
      <p>{complain}</p>
      <input
        type="text"
        onChange={handleInputChange}
        placeholder="文句を入力してください。"
      />
      <button onClick={() => setComplain(text)}>文句を追加します</button>
    </div>
  );
};

export default ComponentC;

実食

動作確認してみてください。
子コンポで親コンポのstateを更新し、子コンポで表示できたと思います。