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:

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

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

App.jsximport 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:

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

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

App.jsximport './styles.css';

Nu skapar vi komponenten MiddleBox i en separat fil:

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

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

BigBox.jsximport MiddleBox from './MiddleBox';

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

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

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

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

MiddleBox.jsximport 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 :)':

App.jsxfunction 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:

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

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

SmallBox.jsxfunction 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:

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