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

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

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

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

import BigBox from './BigBox';

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

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

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

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

import './styles.css';

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

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

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

import MiddleBox from './MiddleBox';

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

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

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

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

import SmallBox from './SmallBox';

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

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

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

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

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

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

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

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

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

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

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

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

空のコンポーネント Appでコンポーネント Parentを作成し、その中にコンポーネント Daughterを、 Daughterの中にコンポーネント Grandsonを作成してください。コンテキストを使用して、Appから年齢の値 42を渡し、 useContextを使用してそれをコンポーネント Daughterで表示してください。

そして今度は、コンポーネント Grandsonで年齢の値を表示してください。ただし、 2で割った値を表示します。