3/1-3

文字列の中に変数を埋め込む

  • `URL/${id}`

 

useContext

  • propsDrilling問題propsのために途中通過点を経由しなければならない
    • useContext+useReducerで解決する

 

useContextを使う

  1. src/contextsを作成
  2. AppContext.jsを作成
  3. AppContext.jsを記述
  4. App.tsxでimport
  5. <AppContext.Provider value={"value from App.js"}>タグで要素を囲う

 

  • AppContext.jsを記述
    • import {createContext} from"react";
      • CreateContextをインポート
    • createContextの構文
      • const AppContext=createContext();
    • export default AppContext;
      • AppContext.jsを他のファイルから読み込めるようにする
  • App.tsxでimport
    • import AppContext from './contexts/AppContext';
  • <AppContext.Provider >タグで要素を囲う

 

孫コンポーネントでProviderタグ内の変数(value)（親コンポーネント）を読み込む