React コンテキスト

今回はコンテキストを使用します。
はじめにの続きからやるので環境構築は「はじめに」を見てください。

コンポーネントでは、引数で値をやり取りしましたが、コンテキストではコンテキストに入れて値をやり取りします。

サンプル

src\CountContext.jsx


import { createContext } from 'react';

export const CountContext = createContext(1);

createContextでコンテキストを作成します。

src\App.jsx


import { useState } from 'react'
import App2 from './App2'
import { CountContext } from './CountContext.jsx'

function App() {
  const [count, setCount] = useState(0)

  function execute() {
    setCount((preVal) => preVal + 1);
  }
  return (
    <CountContext value={count}>
      <h1>Parent</h1>
      <button onClick={() => setCount(0)}>
        reset
      </button>
      <div>{count}</div>
      <App2 exec={execute}>
        +button
      </App2>
    </CountContext>
  )
}

export default App

<CountContext value={count}>でCountContextにcountをセットします。

src\App2.jsx


import { useContext } from 'react';
import { CountContext } from './CountContext.jsx'

function App2({ exec, children }) {

  const count = useContext(CountContext);

  return (
    <>
      <h2>child</h2>
      <button onClick={() => exec()}>
        {children}
      </button>
      <div>{count}</div>
    </>
  )
}

export default App2

useContext(CountContext)でCountContextに入っているコンテキストを取得します。

実行結果

ページのトップへ戻る