Kifaa cha useContext cha Context katika React

Katika somo hili tutaendelea kufanya kazi na context. Sasa tutajenga mti wa vijenzi. Kuanza, katika faili tofauti tuunde kijenzi cha React BigBox:

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

Tutaiagiza na kuiweka katika kijenzi chetu kikuu App:

App.jsximport BigBox from './BigBox';

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

Kwa uwazi zaidi, tutaweka mitindo kidogo kwa divi. Kwa hili tutaunda faili styles.css:

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

Tusisahau kuiagiza katika App.js:

App.jsximport './styles.css';

Sasa katika faili tofauti tuunde kijenzi MiddleBox:

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

Na tutaiweka kwenye sanduku kubwa BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Tutafanya yaleyale kwa sanduku ndogo SmallBox:

SmallBox.jsxfunction SmallBox() {
  return (
    <p>Mimi ni ... </p>
  );
}

Tutaweka sanduku ndogo mbili kama hizi katika MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Tumejenga mti. Na sasa tungependa kutoka kwa App yetu kupitisha, tuseme, kwa SmallBox thamani ya mfuatano 'small box :)', bila kutumia props, bali kwa kutumia context (ikia programu yetu ya masanduku itaongezeka kwa ukubwa mkubwa).

Faili yenye context MyContext.js tumeunda na kuiunganisha tayari katika somo lilopita.

Hatua inayofuata, ambayo tutafanya - tutafunga BigBox kwenye mdau wa context, ambayo ni sifa ya kitu chetu cha context MyContext. Sasa vijenzi vyote, vilivyomo kwenye muundo huu (na hii ni pamoja na masanduku yote, yaliyomo kwenye BigBox) yataweza kupata ufikiaji na kujisajili kwa mabadiliko ya context. Kama thamani ya context tunapita inayotakiwa 'small box :)':

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

Na sasa inabaki kusoma thamani ya context. Tulitaka kuitumia katika SmallBox, kwa hivyo tutaagiza huko faili ya context MyContext.js na kifaa useContext:

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

Tutasoma kwa kutumia useContext thamani ya context kwenye kutofautisha name:

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

Tumejisajili SmallBox kwenye context huu na, ikiwa itabadilika, kijenzi hiki pia kitasasishwa.

Na, mwishowe, tunaweka thamani ya kutofautisha name badala ya dotsi tatu:

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