Hook Konteks useContext di React

Dalam pelajaran ini, kita akan melanjutkan pekerjaan dengan konteks. Sekarang kita akan membangun pohon komponen. Untuk memulainya, dalam file terpisah buatlah komponen React BigBox:

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

Impor dan tempatkan di komponen utama kita App:

import BigBox from './BigBox';

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

Untuk kejelasan yang lebih baik, mari kita beri gaya pada div. Untuk itu, buat file styles.css:

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

Jangan lupa untuk mengimpornya ke App.js:

import './styles.css';

Sekarang dalam file terpisah, buat komponen MiddleBox:

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

Dan letakkan di dalam kotak besar BigBox:

import MiddleBox from './MiddleBox';

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

Lakukan hal yang sama dengan kotak kecil SmallBox:

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

Mari tempatkan dua kotak seperti itu di MiddleBox:

import SmallBox from './SmallBox';

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

Kita telah membangun pohon. Dan sekarang kita ingin dari App kita meneruskan, katakanlah, ke SmallBox nilai string 'small box :)', tanpa menggunakan props, tetapi menggunakan konteks (bagaimana jika aplikasi kotak kita berkembang menjadi sangat besar).

File konteks MyContext.js kita telah buat dan sambungkan di pelajaran sebelumnya.

Langkah selanjutnya yang akan kita lakukan - bungkus BigBox dalam penyedia konteks, yang merupakan properti dari objek konteks kita MyContext. Sekarang semua komponen yang berada dalam konstruksi ini (dan ini semua kotak, yang bersarang di dalam BigBox) dapat mengakses dan berlangganan perubahan konteks. Sebagai nilai konteks, kita meneruskan yang diinginkan 'small box :)':

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

Dan sekarang tinggal membaca nilai konteks. Kami ingin menggunakannya di SmallBox, yang berarti impor file konteks MyContext.js dan hook useContext ke sana:

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

Baca dengan useContext nilai konteks ke dalam variabel name:

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

Kami telah melanggan SmallBox ke konteks ini dan, jika berubah, komponen ini juga akan diperbarui.

Dan, akhirnya, substitusikan nilai variabel name menggantikan elipsis:

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

Dalam komponen kosong App, buatlah komponen Parent, dan di dalamnya komponen Daughter, dan di Daughter komponen Grandson. Menggunakan konteks, teruskan dari App nilai usia 42, dan dengan useContext tampilkan di komponen Daughter.

Dan sekarang dalam komponen Grandson tampilkan nilai usia, tapi dibagi dengan 2.