useContext Hook i React

I denne leksjonen fortsetter vi arbeidet med kontekst. Nå skal vi bygge et tre av komponenter. Til å begynne med, i en separat fil, oppretter vi en React-komponent BigBox:

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

Vi importerer den og plasserer den i vår hovedkomponent App:

import BigBox from './BigBox';

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

For bedre visuell forståelse, vil vi styling div-elementene litt. For dette oppretter vi filen styles.css:

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

La oss ikke glemme å importere den i App.js:

import './styles.css';

Nå, i en separat fil, oppretter vi komponenten MiddleBox:

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

Og plasserer den i den store esken BigBox:

import MiddleBox from './MiddleBox';

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

La oss gjøre det samme med den lille esken SmallBox:

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

Vi plasserer to slike esker i MiddleBox:

import SmallBox from './SmallBox';

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

Treet har vi bygget. Og nå ønsker vi å sende fra vår App, for eksempel, til SmallBox en strengverdi 'small box :)', uten å bruke props, men ved å bruke kontekst (i tilfelle eske-applikasjonen vår vokser til enorme størrelser).

Filen med kontekst MyContext.js vi allerede opprettet og koblet til i forrige leksjon.

Neste steg, som vi vil ta - omslutter vi BigBox i kontekstprovider, som er en egenskap til kontekstobjektet vårt MyContext. Nå kan alle komponenter innelukket i denne konstruksjonen (og det er alle esker, nested i BigBox) få tilgang og abonnere på endringer i konteksten. Som verdi for konteksten sender vi den ønskede 'small box :)':

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

Og nå gjenstår det bare å lese verdien av konteksten. Vi ønsket å bruke den i SmallBox, så vi importerer kontekstfilen MyContext.js og hooken useContext:

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

La oss lese ved hjelp av useContext kontekstverdien inn i variabelen name:

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

Vi abonnerte SmallBox på denne konteksten og, hvis den endres, vil denne komponenten også bli oppdatert.

Og til slutt, erstatter vi verdien av variabelen name i stedet for ellipsen:

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

I den tomme komponenten App, opprett komponenten Parent, og i den komponenten Daughter, og i Daughter komponenten Grandson. Bruk kontekst til å sende fra App verdien alder 42, og ved hjelp av useContext, vis den i komponenten Daughter.

Og nå, i komponenten Grandson, vis alderen, men delt på 2.