Hooken useContext för kontext i React

I den här lektionen kommer vi att fortsätta arbeta med kontext. Nu ska vi bygga ett träd av komponenter. Till att börja med, skapa en React-komponent BigBox i en separat fil:

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

Importera den och placera den i vår huvudkomponent App:

import BigBox from './BigBox';

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

För att göra det mer visuellt, låt oss styla div-elementen lite. För att göra detta, skapa filen styles.css:

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

Kom ihåg att importera den i App.js:

import './styles.css';

Nu skapar vi komponenten MiddleBox i en separat fil:

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

Och sätt in den i den stora lådan BigBox:

import MiddleBox from './MiddleBox';

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

Låt oss göra samma sak med den lilla lådan SmallBox:

function SmallBox() {
	return (
		<p>Jag är ... </p>
	);
}

Låt oss placera två sådana lådor i MiddleBox:

import SmallBox from './SmallBox';

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

Trädet har vi byggt. Och nu vill vi från vår App skicka, låt oss säga, till SmallBox ett strängvärde 'small box :)', utan att använda props, utan att använda kontext (tänk om vår lådapplikation växer till enorma storlekar).

Filen med kontexten MyContext.js har vi redan skapat och anslutit i förra lektionen.

Nästa steg som vi kommer att göra är att omsluta BigBox med en kontextprovider, som är en egenskap hos vårt kontextobjekt MyContext. Nu kommer alla komponenter som ingår i denna konstruktion (det vill säga alla lådor nästlade i BigBox) att kunna få åtkomst och prenumerera på kontextförändringar. Som kontextvärde skickar vi det önskade 'small box :)':

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

Och nu återstår bara att läsa kontextvärdet. Vi ville använda det i SmallBox, så vi importerar kontextfilen MyContext.js dit och hooken useContext:

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

Låt oss läsa kontextvärdet med hjälp av useContext in i variabeln name:

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

Vi har prenumererat SmallBox på denna kontext och, om den ändras, kommer denna komponent också att uppdateras.

Och slutligen, sätt in värdet av variabeln name istället för ellipsen:

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

I en tom komponent App, skapa komponenten Parent, och i den komponenten Daughter, och i Daughter komponenten Grandson. Använd kontext för att skicka från App värdet för ålder 42, och med hjälp av useContext, visa det i komponenten Daughter.

Och nu, i komponenten Grandson, visa åldersvärdet, men delat med 2.