React-daky useContext kontekst gөç

Bu sapakda biz kontekst bilen işlemegi dowam edaris. Indi komponentleriň agajyny gurarys. Başlangyç üçin aýratyn faýlda React komponenty BigBox dörediň:

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

Ony import edeliň we baş komponentimiz App-de ýerleşdiriň:

App.jsximport BigBox from './BigBox';

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

Daha aýdyňlyk üçin birneme stil bereliň diwlere. Bunuň üçin styles.css faýlyny dörediň:

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

Ony import etmegi ýatdan çykarmaň App.js-e:

App.jsximport './styles.css';

Indi aýratyn faýlda MiddleBox komponenty dörediň:

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

We ony uly gutuja BigBox goýuň:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Kiçijik gutujyk bilen hem SmallBox şol bir işi edeliň:

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

Ondan iki sany şeýle gutujygy MiddleBox-de ýerleşdiriň:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Agajy gurduk. Indi bolsa biz App-den, meselem, SmallBox-e setir bahasyny 'small box :)' geçirmek isleýäris, propssyz, kontekst ulanyp (gutar-da gutulygyňyz programmamyz uly ölçegli bolup biler).

Kontekst faýly MyContext.js biz öňki sapakda döredip we birikdirdik.

Indiki ädim, edjek zadymyz - BigBox-i kontekstiň provaydery bilen gapdalaýarys, käbir kontekst obýektimiziň MyContext aýratynlygy. Indi bu gurluşda ýerleşen ähli komponentler (bu hem BigBox içine goýlan ähli gutulyklar) kontekste giriş alar we onyň üýtgeşikliklerine ýazylar. Kontekstiň bahasy hökmünde islenen 'small box :)' geçirýäris:

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

Indi galýan zadymyz kontekstiň bahasyny okamak. Biz ony SmallBox-de ulanmak isledik, şonuň üçin ol ýere kontekst faýlyny MyContext.js we gөç-i useContext import edeliň:

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

useContext kömegi bilen kontekstiň bahasyny name üýtgeýjisine okaýarys:

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

Biz SmallBox-i bu kontekste ýazdyrdyk we, eger ol üýtgese, bu komponent hem täzelenjek.

We, ahyrynda, üýtgeýjiniň bahasyny name köçeltme nyrhlarynyň ýerine goýýarys:

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