Reactにおけるコンテキストの更新

このレッスンでは、コンテキストの値が変更された際のコンポーネントの更新について検討します。コンテキストを変更したい状況を想定してみましょう。

このような場合、コンテキストをステートと組み合わせて使用すると便利です。前回のレッスンで作成した箱のアプリケーションを少し変更し、ボタンをクリックすると渡される値が'metal box :)'になるようにしてみましょう。

それでは、Appファイルを取り出し、BigBoxの後にボタンを描画します：

App.jsxfunction App() {
  return (
    <MyContext.Provider value="small box :)">
      <BigBox />
      <button>click</button>
    </MyContext.Provider>
  );
}

次に、useStateフックをインポートし、ボタンクリックで変更されるnameステートを作成します。その初期値は、コンテキストの値として直前に渡していた値、つまり'small box :)'とします：

App.jsxfunction App() {
  const [name, setName] = useState('small box :)');
}

今回は、コンテキストとして文字列ではなく、nameステートを渡します：

App.jsx<MyContext.Provider value={name}>
  <BigBox />
  <button>click</button>
</MyContext.Provider>

最後のステップとして、ボタンクリックのハンドラーを呼び出し、setName関数を使用してステートの新しい値を'metal box :)'に設定します。その後、ボタンをクリックして結果を確認できます：

App.jsx<button onClick={() => {
  setName('metal box :)');
}}>click</button>