useContext Hook i React

I denne lektion fortsætter vi arbejdet med kontekst. Nu vil vi bygge et træ af komponenter. Til at starte med, i en separat fil, opretter vi React komponenten BigBox:

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

Vi importerer den og placerer den i vores hovedkomponent App:

App.jsximport BigBox from './BigBox';

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

For mere klarhed vil vi style div'ene lidt. For at gøre dette opretter vi filen styles.css:

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

Husk at importere den i App.js:

App.jsximport './styles.css';

Nu i en separat fil opretter vi komponenten MiddleBox:

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

Og lægger den i den store kasse BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Vi gør det samme med den lille kasse SmallBox:

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

Vi placerer to sådanne kasser i MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Træet har vi bygget. Og nu vil vi fra vores App sende, for eksempel, til SmallBox en streng værdi 'small box :)', uden at bruge props, men ved at bruge kontekst (hvad nu hvis vores kasse applikation vokser sig enorm stor).

Filen med konteksten MyContext.js har vi allerede oprettet og tilsluttet i den forrige lektion.

Næste skridt, som vi vil tage - er at indpakke BigBox i en kontekst provider, som er en egenskab ved vores kontekst objekt MyContext. Nu kan alle komponenter, der er indeholdt i denne konstruktion (og det er alle kasser, nestede i BigBox) få adgang og abonnere på ændringer i konteksten. Som værdi for konteksten sender vi den ønskede 'small box :)':

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

Og nu er der kun tilbage at læse værdien af konteksten. Vi ville bruge den i SmallBox, så vi importerer kontekstfilen MyContext.js og hook useContext derind:

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

Vi læser med useContext kontekstværdien i variablen name:

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

Vi har abonneret SmallBox på denne kontekst og, hvis den ændres, vil dette komponent også blive opdateret.

Og endelig indsætter vi værdien af variablen name i stedet for ellipsen:

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