Kontekstihook useContext Reactis

Selles õppetükis jätkame tööd kontekstiga. Nüüd ehitame komponentide puu. Alustuseks loome eraldi failis Reacti komponendi BigBox:

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

Impordime selle ja asetame oma peamisse komponenti App:

App.jsximport BigBox from './BigBox';

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

Suurema selguse huvides veidi stiilime div'e. Selleks loome faili styles.css:

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

Ärgem unustagem seda importida App.js:

App.jsximport './styles.css';

Nüüd loome eraldi failis komponendi MiddleBox:

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

Ja paneme selle suurde kasti BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Teeme kõik sama väikese kastiga SmallBox:

SmallBox.jsxfunction SmallBox() {
  return (
    <p>Ma olen ... </p>
  );
}

Asetame kaks sellist kasti MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Puu ehitasime. Ja nüüd me soovime oma App kaudu edastada, oletame, SmallBox stringväärtuse 'small box :)', mitte kasutades propseid, vaid kasutades konteksti (mis siis, kui meie kastirakendus kasvab hiiglaslikeks mõõtmeteks).

Kontekstiga faili MyContext.js me juba lõime ja ühendasime eelmises õppetükis.

Järgmine samm, mille me teeme - mähime BigBox konteksti pakkujasse, mis on meie kontekstiobjekti omadus MyContext. Nüüd kõik komponendid, mis on selle konstruktsiooni sees (ja see on kõik kastid, mis on pesastatud BigBox) saavad juurdepääsu ja tellida konteksti muutustele. Konteksti väärtusena anname soovitud 'small box :)':

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

Ja nüüd jääb üle vaid konteksti väärtuse lugemine. Me tahtsime seda kasutada SmallBox, seega impordime sinna kontekstifaili MyContext.js ja hooki useContext:

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

Loeme useContext abil konteksti väärtuse muutujasse name:

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

Me tellisime SmallBox sellele kontekstile ja kui see muutub, siis see komponent uuendatakse samuti.

Ja lõpetuseks asendame muutuja väärtuse name kolmikpunkti asemel:

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