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 වෙත. App හි Parent අංගයට යටින් බොත්තමක් එක් කරන්න, එහි එක් එක් ක්ලික් කිරීමේදී රාජ්‍යයේ අගය age 2 කින් අඩු වේ.