React + TypeScript: コンテクストが渡すデータを更新するコード例 - Qiita

コンテクストのデータを更新するには、値はプロバイダが定められた親コンポーネントの状態変数にしてください。コンテクストのプロバイダにvalue値として渡すのはその状態変数です。 React公式ドキュメントの「useContext」には「Updating data passed via context」の項で、コンテクストの渡すデータを更新する5つのコードサンプルが紹介されています。もっとも、説明があまりありません(サンプルのコードを見てくださいということのようです)。そこで、本稿では解説をもう少し補ってみましょう。さらに、TypeScriptで型づけし、モジュール分けやコードについても少し工夫を加えました。 チェックボックスによりコンポーネントのカラーを切り替える つぎのサンプル001では、チェックボックスでコンポーネントのカラーが切り替わります。コードの中身については、「コンテクストが渡す