React-da konteksti täzelemek

Bu sapakda kontekstiň bahasy üýtgende komponentleriň täzelenişini gözden geçireris. Kontekstiň üýtgeýşini isleýändigiňizi öýdüň.

Bu ýagdaýda, konteksti döwürler bilen birikdirmek peýdaly. Öňki sapakda eden gutujykamyz bilen programmanymyzy birneme üýtgedeliň we düwmä basylanda geçirilýän bahanyň 'metal box :)' bolup üýtgemegini edeliň.

Şeýlelik bilen, App faýlymyzy alyp BigBox komponentiňizden soňra düwmäni çyzalyň:

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
			<button>click</button>
		</MyContext.Provider>
	);
}

Indiki ädimde, useState gabygyny import edeliň we name döwrüni düzeliň, onuň bahasy düwmä basylanda üýtgerer. Başlangyç bahasy kontekst üçin ilkinji berýän bahamyz bolsun, ýagny 'small box :)':

function App() {
	const [name, setName] = useState('small box :)');
}

Bu gezek, kontekst bilen setir ýerine name döwrüni geçireris:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

Iň soňky ädim hökmünde, düwmanyň basyşyna çakylyjy işleýjini çagyryp we setName funksiýasyny ulanyp döwriň täze bahasyny 'metal box :)' edip goýarys. Soňra düwmä basyp netijäni synap görüp bilersiňiz:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

Öňki sapakdaky meseleleri çözmekde döreden programmanyňyzy ulan. App-dan kontekst bilen san ýerine geçireris diýip age döwrüni düzüň, onuň başlangyç bahasyny 50 edip belgiliň. App-daky Parent komponentiňizden aşakda bir düwme goşuň, her gezek basylanynda age döwriňizň bahasy 2 azalmaly.