Контексти React-ро нав кардан

Дар ин дарс мо нав кардани компонентҳоро дар вақти тағйир ёфтани арзиши контекст меомӯзем. Фарз мекунем, ки шумо мехоҳед, ки контекст тағйир ёбад.

Дар ин ҳолат истифода бурдани контекст байни ҳолатҳо (стейтҳо) муфид аст. Биёед ба тадриқи барномаи мо бо қуттичаҳоро, ки мо дар дарси гузашта сохта будем, тағйирот ворид кунем ва чунон кунем, ки пас аз фишор додани тугма арзиши интиқолдодашуда 'metal box :)' шавад.

Пас, файли App-ро гирифта ва баъд аз BigBox тугмача месозем:

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

Баъд аз он, hook-и 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 кам шавад.