Обновление конекста в React
В этом уроке мы рассмотрим обновление компонентов при смене значения контекста. Предположим вы захотите, чтобы контекст менялся.
В этом случае полезно применять контекст
в связке со стейтами. Давайте немного
изменим наше приложение с коробочками,
которое мы делали на прошлом уроке и
сделаем так, чтобы по нажатию на кнопку
передаваемое значение стало бы
'metal box :)'.
Итак, возьмем наш файл App и после
BigBox нарисуем кнопочку:
function App() {
return (
<MyContext.Provider value="small box :)">
<BigBox />
<button>click</button>
</MyContext.Provider>
);
}
Далее импортируем хук useState и заведем
стейт name, значение которого будет
меняться по нажатию кнопки. Сделаем ему
начальным значением то, которое мы сразу
передавали значением контекста, то есть
'small box :)':
function App() {
const [name, setName] = useState('small box :)');
}
На этот раз контекстом мы будем передавать
не строку, а стейт name:
<MyContext.Provider value={name}>
<BigBox />
<button>click</button>
</MyContext.Provider>
В качестве последнего шага мы будем вызывать
обработчик клика по кнопке и с помощью функции
setName устанавливать новое значение
стейта в 'metal box :)'.
После этого можно будет нажать
на кнопку и проверить результат:
<button onClick={() => {
setName('metal box :)');
}}>click</button>
Используйте приложение, созданное вами
при решении задач к предыдущему уроку.
Заведите стейт age, который вы будете
вместо числа передавать с помощью контекста
из App, установите ему начальное
значение 50. Добавьте под компонентом
Parent в App кнопку, при
каждом клике на которую значение стейта
age будет уменьшаться на 2.