- Contextとは
値を子に渡せる仕組みの一つ。
プロパティと違い、Contextが提供されているコンポーネントであれば
どのコンポーネントからでも使用可能。
※例はTypeScriptを用いた例です。
- createContext
コンテキストを作成する。 <>の中には型。引数には
export const ABContext = createContext<string>("");
- Provider
プロバイダを用いて、子要素にContextを渡す。
<ABCContext.Provider value={"子要素に渡す値"}> // Contextを使う子要素 {children} </ABContext.Provider>
- useContext
コンテキストの値を使う。
const value = useContext(ABContext); console.log(value); // 子要素に渡す値
- 使いどころ
useStateをContextで子要素に渡して状態管理したりするととても便利。