Обновление контекста в 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>