useContextで使う

React状態管理：カスタムフック・Context・Reducer / 全 6 枚

取り出す前と後

PriceTag が theme を受け取る2通りの書き方を見比べます。

propsで運ぶ

function PriceTag(
  { price, theme }: PriceTagProps
) {
  return <p>{theme}</p>;
}

useContextで取る

function PriceTag({ price }: Props) {
  const theme =
    useContext(ThemeContext);
  return <p>{theme}</p>;
}

props を1つ減らすだけで、途中の受け渡しが消えます。

1 / 6

← → キーでも送れます