React-ում կոնտեքստի թարմացում

Այս դասում մենք կքննարկենք կոնտեքստի արժեքի փոփոխության դեպքում կոմպոնենտների թարմացումը: Ենթադրենք, որ ցանկանում եք, որ կոնտեքստը փոխվի:

Այս դեպքում օգտակար է կիրառել կոնտեքստ ստեյթերի հետ զուգակցված: Եկեք մի փոքր փոխենք մեր տուփիկներով հավելվածը, որը մենք պատրաստեցինք նախորդ դասին և պատրաստենք այնպես, որ կոճակի սեղմման դեպքում փոխանցվող արժեքը դառնա 'metal box :)':

Այսպիսով, վերցնենք մեր App ֆայլը և BigBox-ից հետո ավելացնենք կոճակ.

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

Հաջորդիվ իմպորտ անենք useState հուկը և ստեղծենք name ստեյթը, որի արժեքը կփոխվի կոճակի սեղմման դեպքում: Տանք նրան նախնական արժեք այն, ինչ մենք անմիջապես փոխանցել էինք կոնտեքստի արժեքով, այսինքն 'small box :)':

App.jsxfunction App() {
  const [name, setName] = useState('small box :)');
}

Այս անգամ կոնտեքստով մենք կփոխանցենք ոչ թե տող, այլ name ստեյթը.

App.jsx<MyContext.Provider value={name}>
  <BigBox />
  <button>click</button>
</MyContext.Provider>

Որպես վերջին քայլ, մենք կկանչենք կոճակի սեղմման մշակիչը և setName ֆունկցիայի միջոցով կսահմանենք ստեյթի նոր արժեքը որպես 'metal box :)': Դրանից հետո հնարավոր կլինի սեղմել կոճակի վրա և ստուգել արդյունքը.

App.jsx<button onClick={() => {
  setName('metal box :)');
}}>click</button>