Konteksta hūks useContext React

Šajā nodarbībā mēs turpināsim darbu ar kontekstu. Tagad izveidosim komponentu koku. Sākumā atsevišķā failā izveidosim React komponentu BigBox:

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

Importēsim to un ievietosim mūsu galvenajā komponentā App:

App.jsximport BigBox from './BigBox';

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

Lai padarītu vizuāli saprotamāku, nedaudz stilizēsim divus. Lai to izdarītu, izveidosim failu styles.css:

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

Neaizmirsīsim to importēt App.js:

App.jsximport './styles.css';

Tagad atsevišķā failā izveidosim komponentu MiddleBox:

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

Un ievietosim to lielajā kastē BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Izdarīsim to pašu ar mazo kastiņu SmallBox:

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

Ievietosim divas šādas kastiņas MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Koku mēs esam izveidojuši. Un tagad mēs vēlamies no mūsu App nodot, pieņemsim, uz SmallBox virknes vērtību 'small box :)', ne izmantojot props, bet izmantojot kontekstu (ja nu mūsu kastīšu lietotne izaugs līdz milzīgiem izmēriem).

Failu ar kontekstu MyContext.js mēs jau izveidojām un pievienojām iepriekšējā nodarbībā.

Nākamais solis, ko mēs veiksim - ietīsim BigBox konteksta providerī, kas ir mūsu konteksta objekta īpašība MyContext. Tagad visi komponenti, kas atrodas šajā konstrukcijā (un tas ir arī visas kastes, kas ietilpst BigBox) varēs piekļūt un pierakstīties uz konteksta izmaiņām. Kā konteksta vērtību mēs nododam vēlamo 'small box :)':

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

Un tagad atliek tikai nolasīt konteksta vērtību. Mēs gribējām to izmantot SmallBox, tāpēc importēsim tur konteksta failu MyContext.js un hūku useContext:

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

Izlasīsim ar useContext konteksta vērtību mainīgajā name:

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

Mēs esam pierakstījuši SmallBox uz šo kontekstu un, ja tas mainīsies, šis komponents tiks atjaunināts.

Un, beidzot, ievietojam mainīgā name vērtību daudzpunktes vietā:

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