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:

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

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

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

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

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

App.jsximport './styles.css';

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

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

Og plasserer den i den store esken BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

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

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

Vi plasserer to slike esker i MiddleBox:

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

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

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

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

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

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