Usasishaji wa Mawasiliano katika React

Katika somo hili tutachunguza usasishaji wa vipengele wakati thamani ya mawasiliano inabadilika. Tuseme ungetaka, mawasiliano yabadilike.

Katika hali hii, ni muhimu kutumia mawasiliano pamoja na hali. Hebu tubadilishe kidogo programu yetu ya masanduku, ambayo tulifanya katika somo lililopita na tufanye ili, kwa kubofya kitufe thamani inayopitishwa ibadilike kuwa 'metal box :)'.

Kwa hiyo, tuchukue faili yetu App na baada ya BigBox tuchore kitufe kidogo:

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

Ifuatayo, ingiza kutumia useState na unda hali name, thamani yake itabadilika kwa kubofya kitufe. Tuiweke thamani ya kwanza ile tuliyopitisha mara moja kama thamani ya mawasiliano, yaani 'small box :)':

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

Wakati huu, tutapitisha kwa mawasiliano sio mfuatano wa herufi, bali hali name:

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

Kama hatua ya mwisho, tutaita kishughulizi cha kubofya kitufe na kwa kutumia kitendo setName kuweka thamani mpya ya hali kuwa 'metal box :)'. Baada ya hayo, inaweza kubofywa kitufe na kuangalia matokeo:

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

Tumia programu uliyoiumba wakati wa kutatua matatizo ya somo lililopita. Undaa hali age, ambayo uta badala ya namba kupitisha kwa kutumia mawasiliano kutoka App, uweke thamani ya kwanza kuwa 50. Ongeza chini ya kipengele Parent katika App kitufe, kilicho kila kubofya kwake thamani ya hali age itapungua kwa 2.