Актуализиране на контекста в 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.