Kontekshook useContext in React

In hierdie les sal ons voortgaan om met konteks te werk. Nou sal ons 'n boom van komponente bou. Om te begin, skep 'n React-komponent BigBox in 'n aparte lêer:

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

Voer dit in en plaas dit in ons hoofkomponent App:

import BigBox from './BigBox';

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

Vir beter sigbaarheid, sal ons die style van die dive effens aanpas. Om dit te doen, skep 'n lêer styles.css:

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

Moenie vergeet om dit in te voer nie in App.js:

import './styles.css';

Nou skep 'n komponent MiddleBox in 'n aparte lêer:

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

En plaas dit in die groot bus BigBox:

import MiddleBox from './MiddleBox';

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

Ons sal dieselfde doen met 'n klein boksie SmallBox:

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

Plaas twee sulke boksies in MiddleBox:

import SmallBox from './SmallBox';

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

Ons het die boom gebou. En nou wil ons vanaf ons App, laat ons sê, na SmallBox 'n stringwaarde 'small box :)' oordra, sonder om props te gebruik, maar deur konteks te gebruik (plots sou ons boksie-aansoek tot groot afmetings groei).

Ons het die kontekslêer MyContext.js reeds geskep en in die vorige les gekoppel.

Die volgende stap wat ons sal neem - ons sal BigBox in 'n konteksverskaffer wikkel, wat 'n eienskap is van ons konteksobject MyContext. Nou sal alle komponente wat in hierdie konstruksie ingesluit is (en dit is al die boksies, genestel in BigBox) toegang kan verkry en kan inteken op konteksveranderinge. As kontekswaarde gee ons die gewenste 'small box :)':

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

En nou bly dit net om die waarde van die konteks te lees. Ons wou dit in SmallBox gebruik, dus voer ons die kontekslêer MyContext.js daar in en die hook useContext:

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

Lees die kontekswaarde in die veranderlike name met behulp van useContext:

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

Ons het SmallBox op hierdie konteks ingeteken en, as dit verander, sal hierdie komponent ook opgedateer word.

En laastens, plaas die waarde van die veranderlike name in die plek van die ellips (...):

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

In 'n leë komponent App, skep 'n komponent Parent, en daarin 'n komponent Daughter, en in Daughter 'n komponent Grandson. Gebruik konteks, om die ouderdomwaarde 42 van App oor te dra, en vertoon dit dan in die komponent Daughter met behulp van useContext.

En nou, in die komponent Grandson, vertoon die ouderdomwaarde, maar gedeel deur 2.