Le hook de contexte useContext dans React

Dans cette leçon, nous allons continuer à travailler avec le contexte. Maintenant, construisons une arborescence de composants. Pour commencer, créons un composant React BigBox dans un fichier séparé :

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

Importons-le et plaçons-le dans notre composant principal App :

import BigBox from './BigBox';

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

Pour plus de clarté, appliquons un peu de style aux divs. Pour cela, créons un fichier styles.css :

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

N'oublions pas de l'importer dans App.js :

import './styles.css';

Maintenant, créons un composant MiddleBox dans un fichier séparé :

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

Et plaçons-le dans la grande boîte BigBox :

import MiddleBox from './MiddleBox';

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

Faisons de même avec la petite boîte SmallBox :

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

Plaçons deux de ces boîtes dans MiddleBox :

import SmallBox from './SmallBox';

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

Nous avons construit l'arborescence. Et maintenant nous voulons transmettre de notre App, par exemple, à SmallBox une valeur chaîne 'small box :)', sans utiliser les props, mais en utilisant le contexte (au cas où notre application de boîtes devienne énorme).

Nous avons déjà créé et connecté le fichier de contexte MyContext.js dans la leçon précédente.

La prochaine étape que nous allons faire est d'encapsuler BigBox dans le fournisseur de contexte, qui est une propriété de notre objet de contexte MyContext. Maintenant, tous les composants encapsulés dans cette construction (ce qui inclut toutes les boîtes imbriquées dans BigBox) pourront accéder et s'abonner aux modifications du contexte. En tant que valeur du contexte, nous transmettons la valeur souhaitée 'small box :)' :

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

Et maintenant, il ne reste plus qu'à lire la valeur du contexte. Nous voulions l'utiliser dans SmallBox, donc importons le fichier de contexte MyContext.js et le hook useContext :

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

Lisons avec useContext la valeur du contexte dans la variable name :

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

Nous avons abonné SmallBox à ce contexte et, s'il change, ce composant sera également mis à jour.

Et enfin, substituons la valeur de la variable name à la place des points de suspension :

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

Dans un composant App vide, créez un composant Parent, et dedans un composant Fille, et dans Fille un composant PetitFils. En utilisant le contexte, transmettez depuis App la valeur de l'âge 42, et à l'aide de useContext affichez-la dans le composant Fille.

Et maintenant, dans le composant PetitFils, affichez la valeur de l'âge, mais divisée par 2.