React Contextのミニマムサンプル

2019年8月11日

はじめに

ReactのContextが便利なので、コピペ用にミニマムなサンプルを残しておきます。

サンプル

React.createContext

import React from 'react'

const MyContext = React.createContext();

export default MyContext;

Context.Provider

import React from 'react';
import MyContext from './MyContext';

const MyProvider = (props) => {
  return (
    <MyContext.Provider value={"something"}>
      {props.children}
    </MyContext.Provider>
  )  
}

export default MyProvider

useContext

import React from 'react';
import MyContext from './MyContext';

export default function useMyContext() {
  return React.useContext(MyContext);
}

index

ReactDOM.render(
  <MyProvider>
    <App />
  </MyProvider>
  , 
  document.getElementById('root')
);

使い方

import useMyContext from './useMyContext';

const App = (props) => {
  const myContext = useMyContext();
  return (
    <div>
      // "something"
      {myContext}
    </div>
  )
}

未分類React

Posted by ababa