Абнаўленне кантэксту ў 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>