ฮุค useContext ใน React

ในบทเรียนนี้เราจะทำงานกับ Context ต่อไป ตอนนี้เราจะสร้างต้นไม้ ของคอมโพเนนต์ เริ่มต้นด้วยการสร้าง React component 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>
	);
}

วางกล่องดังกล่าวสองกล่องใน MiddleBox:

import SmallBox from './SmallBox';

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

เราสร้างต้นไม้เสร็จแล้ว และตอนนี้เรา ต้องการส่งจาก App ของเรา สมมติว่าไปยัง SmallBox ค่าสตริง 'small box :)' โดย ไม่ใช้ props แต่ใช้ context (เผื่อว่าแอปพลิเคชันกล่องของเรา จะขยายตัวจนมีขนาดใหญ่โต)

เราได้สร้างและเชื่อมต่อไฟล์ context MyContext.js ในบทเรียนที่แล้วแล้ว

ขั้นตอนต่อไปที่เราจะทำคือ ห่อ BigBox ด้วย context provider ซึ่งเป็นคุณสมบัติของอ็อบเจ็กต์ context MyContext ของเรา ตอนนี้ คอมโพเนนต์ทั้งหมดที่อยู่ในโครงสร้างนี้ (ซึ่งรวมถึงกล่องทั้งหมดที่ซ้อนอยู่ใน BigBox) จะสามารถเข้าถึงและ สมัครรับการเปลี่ยนแปลงของ context ได้ เรา ส่งค่าที่ต้องการ 'small box :)' เป็นค่า context:

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

และตอนนี้เหลือเพียงการอ่านค่า context เราต้องการใช้มันใน SmallBox ดังนั้นให้นำเข้า ไฟล์ context MyContext.js และฮุค useContext ไปที่นั่น:

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

อ่านค่า context โดยใช้ useContext ลงในตัวแปร name:

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

เราสมัครรับSmallBox กับ context นี้ และหากมันเปลี่ยนแปลง คอมโพเนนต์นี้ ก็จะได้รับการอัปเดตด้วย

และสุดท้าย แทนที่ค่าของตัวแปร name แทนที่จุดไข่ปลา:

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

ในคอมโพเนนต์ App ที่ว่างเปล่า สร้าง คอมโพเนนต์ Parent และในนั้นสร้างคอมโพเนนต์ Daughter และใน Daughter สร้างคอมโพเนนต์ Grandson ใช้ context ส่งค่าอายุ 42 จาก App และใช้ useContext แสดงค่าใน คอมโพเนนต์ Daughter

และตอนนี้ในคอมโพเนนต์ Grandson ให้แสดงค่าอายุ แต่หารด้วย 2