React 2023/01/12 (更新日:2023/01/18)

【React Hooks】useContextの使用例コピペで確認

React フックを使うと、React の機能をクラスを書かずに使えるようになります。useContext を使うと祖先のコンポーネントで定義したオブジェクトを、子孫コンポーネントで使用することができます。この記事では、useContextの使用例をまとめています

Context

useContextの使い方

ファイル構成

src/
  |-- App.js
  `-- index.js

祖先コンポーネントの index.js ファイルで Context を定義します。

import React, { createContext } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

const themes = {
  light: {
    foreground: "#000",
    background: "#eee"
  },
  dark: {
    foreground: "#fff",
    background: "#222"
  }
};

export const ThemeContext = createContext('default value');

root.render(
  <ThemeContext.Provider value={themes.light}>
    <App />
  </ThemeContext.Provider>
);

1: createContext をインポートします。

19: コンテクストオブジェクトを作成します。デフォルト値は、ラップしない現在のコンポーネントのテストにて役に立ちます。

22~24: <MyContext.Provider value={/* 値 */}> でラップします。value の値が子孫コンポーネントに渡されます。

import React, { useContext } from "react";
import { ThemeContext } from "./index.js";

function App() {
  const theme = useContext(ThemeContext);
  return (
    <div className="App">
      <h1 style={{ background: theme.background, color: theme.foreground }}>Hello World</h1>
    </div>
  );
}

export default App;

1~2: useContext と先程作成した Context をインポートして、5: オブジェクトを取得して、8: 使用することができます。

Contextを別ファイルで管理する

src/
  |-- index.js
  |-- App.js
  `-- context/
     `-- themeContext.js

以下のように書き換えることができます。

import { createContext } from "react";

export const ThemeContext = createContext();

export const ThemeContextProvider = ({ children }) => {

    const themes = {
        light: {
            foreground: "#000",
            background: "#eee"
        },
        dark: {
            foreground: "#fff",
            background: "#222"
        }
    };

    return (
        <ThemeContext.Provider value={themes.light}>
            {children}
        </ThemeContext.Provider>
    )
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ThemeContextProvider } from './context/themeContext';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <ThemeContextProvider>
    <App />
  </ThemeContextProvider>
);

import React, { useContext } from "react";
import { ThemeContext } from './context/themeContext';

function App() {
  const theme = useContext(ThemeContext);
  return (
    <div className="App">
      <h1 style={{ background: theme.background, color: theme.foreground }}>Hello World</h1>
    </div>
  );
}

export default App;

以上です。