Хук контекста useContext en React

En esta lección continuaremos trabajando con el contexto. Ahora construiremos un árbol de componentes. Para empezar, en un archivo separado crearemos el componente React BigBox:

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

Importémoslo y coloquémoslo en nuestro componente principal App:

App.jsximport BigBox from './BigBox';

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

Para mayor claridad, apliquemos algunos estilos a los divs. Para ello crearemos el archivo styles.css:

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

No olvidemos importarlo en App.js:

App.jsximport './styles.css';

Ahora en un archivo separado crearemos el componente MiddleBox:

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

Y lo colocaremos en la caja grande BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Hagamos lo mismo con la cajita pequeña SmallBox:

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

Coloquemos dos de estas cajitas en MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Hemos construido el árbol. Y ahora queremos pasar desde nuestro App, supongamos, a SmallBox un valor de cadena 'small box :)', sin usar props, sino usando el contexto (por si nuestra aplicación de cajas crece hasta alcanzar grandes dimensiones).

Ya creamos y conectamos el archivo con el contexto MyContext.js en la lección anterior.

El siguiente paso que haremos - envolveremos BigBox en el proveedor de contexto, que es una propiedad de nuestro objeto de contexto MyContext. Ahora todos los componentes incluidos en esta construcción (y esto incluye todas las cajas anidadas en BigBox) podrán acceder y suscribirse a los cambios del contexto. Como valor del contexto pasamos el deseado 'small box :)':

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

Y ahora solo queda leer el valor del contexto. Queríamos usarlo en SmallBox, así que importemos allí el archivo de contexto MyContext.js y el hook useContext:

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

Leamos usando useContext el valor del contexto en la variable name:

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

Hemos suscrito SmallBox a este contexto y, si este cambia, este componente también se actualizará.

Y, finalmente, sustituimos el valor de la variable name en lugar de los puntos suspensivos:

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