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