ReactにおけるuseContextコンテキストフック

このレッスンでは、コンテキストの作業を続けます。 今度はコンポーネントツリーを構築します。 まず、別ファイルでReactコンポーネント BigBoxを作成します：

BigBox.jsxfunction BigBox() {
  return (
    <p>bigbox</p>
  );
}

それをインポートし、メインコンポーネント Appに配置します：

App.jsximport BigBox from './BigBox';

function App() {
  return (
    <BigBox />
  );
}

わかりやすくするために、divを少し スタイリング します。そのために、ファイル styles.cssを作成します：

styles.cssdiv {
  border: 1px solid blue;
  margin: 10px;
  text-align: center;
  max-width: 300px;
}

App.jsにインポートするのを忘れないでください：

App.jsximport './styles.css';

次に、別ファイルでコンポーネント MiddleBoxを作成します：

MiddleBox.jsxfunction MiddleBox() {
  return (
    <p>middlebox</p>
  );
}

そして、それを大きな箱 BigBoxの中に配置します：

BigBox.jsximport MiddleBox from './MiddleBox';

function BigBox() {
  return (
    <div>
      <MiddleBox />
    </div>
  );
}

小さな箱 SmallBoxでも同じことをすべて行います：

SmallBox.jsxfunction SmallBox() {
  return (
    <p>I am ... </p>
  );
}

そのような箱を2つ、 MiddleBoxに配置します：

MiddleBox.jsximport SmallBox from './SmallBox';

function MiddleBox() {
  return (
    <div>
      <SmallBox />
      <SmallBox />
    </div>
  );
}

ツリーは構築しました。さて、今度は Appから、例えば SmallBoxに 文字列値 'small box :)'を、 プロップスを使用せずにコンテキストを 利用して渡したいと思います（私たちの箱アプリが 巨大なサイズに成長するかもしれないからです）。

コンテキストファイル MyContext.jsは 前のレッスンですでに作成し、接続しました。

次に行うステップは、BigBoxを コンテキストオブジェクト MyContextの プロパティであるコンテキストプロバイダーで ラップすることです。 これで、この構造に囲まれたすべてのコンポーネント （BigBoxにネストされたすべての箱も含む）は コンテキストにアクセスし、変更をサブスクライブ できるようになります。 コンテキストの値として、希望の 'small box :)'を渡します：

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

あとはコンテキストの値を読み取るだけです。 それを SmallBoxで使用したいので、 コンテキストファイル MyContext.jsと フック useContextをそこにインポートします：

SmallBox.jsximport { useContext } from 'react';
import { MyContext } from './MyContext.js';

useContextを使用して、コンテキストの値を 変数 nameに読み取ります：

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>I am ... </p>
    </div>
  );
}

SmallBoxをこのコンテキストにサブスクライブし、 コンテキストが変更された場合、このコンポーネントも 更新されます。

そして最後に、変数 nameの値を 三点リーダーの代わりに代入します：

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>I am {name} </p>
    </div>
  );
}