Kait Konteks useContext dalam React

Dalam pelajaran ini, kita akan terus bekerja dengan konteks. Sekarang kita akan membina pokok komponen. Untuk permulaan, dalam fail berasingan buat komponen React BigBox:

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

Importnya dan letakkan dalam komponen utama kami App:

import BigBox from './BigBox';

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

Untuk lebih kejelasan, mari kita gayakan div sedikit. Untuk ini, buat fail styles.css:

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

Jangan lupa untuk mengimportnya ke dalam App.js:

import './styles.css';

Sekarang dalam fail berasingan buat komponen MiddleBox:

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

Dan letakkannya dalam kotak besar BigBox:

import MiddleBox from './MiddleBox';

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

Mari lakukan perkara yang sama dengan kotak kecil SmallBox:

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

Letakkan dua kotak sedemikian dalam MiddleBox:

import SmallBox from './SmallBox';

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

Kami telah membina pokok. Dan sekarang kami mahu menghantar dari App kami, katakan, ke SmallBox nilai rentetan 'small box :)', tanpa menggunakan props, tetapi menggunakan konteks (sekiranya aplikasi kotak kami berkembang menjadi saiz yang sangat besar).

Fail dengan konteks MyContext.js kami telah buat dan sambungkan dalam pelajaran lepas.

Langkah seterusnya yang akan kami lakukan - bungkus BigBox dalam penyedia konteks, yang merupakan sifat objek konteks kami MyContext. Sekarang semua komponen yang disertakan dalam pembinaan ini (dan ini semua kotak yang disertakan dalam BigBox) akan dapat mengakses dan melanggan perubahan konteks. Sebagai nilai konteks, kami menghantar yang dikehendaki 'small box :)':

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

Dan sekarang tinggal membaca nilai konteks. Kami mahu menggunakannya dalam SmallBox, jadi import fail konteks MyContext.js ke sana dan kait useContext:

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

Baca dengan useContext nilai konteks ke dalam pembolehubah name:

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

Kami telah melanggan SmallBox kepada konteks ini dan, jika ia berubah, komponen ini juga akan dikemas kini.

Dan akhirnya, gantikan nilai pembolehubah name sebagai ganti elipsis:

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

Dalam komponen kosong App, buat komponen Parent, dan di dalamnya komponen Daughter, dan dalam Daughter komponen Grandson. Menggunakan konteks, hantar dari App nilai umur 42, dan dengan bantuan useContext paparkannya dalam komponen Daughter.

Dan sekarang dalam komponen Grandson paparkan nilai umur, tetapi dibahagikan dengan 2.