React'te useContext Bağlam Kancası

Bu derste, bağlamla çalışmaya devam edeceğiz. Şimdi bir bileşen ağacı kuracağız. Başlangıç olarak ayrı bir dosyada bir React bileşeni BigBox oluşturacağız:

function BigBox() {
	return (
		<p>bigbox</p>
	);
}

Onu içe aktaralım ve ana bileşenimiz App içine yerleştirelim:

import BigBox from './BigBox';

function App() {
	return (
		<BigBox />
	);
}

Daha iyi görselleştirme için div'lere biraz stil uygulayalım. Bunun için styles.css dosyasını oluşturalım:

div {
	border: 1px solid blue;
	margin: 10px;
	text-align: center;
	max-width: 300px;
}

Onu App.js dosyasına aktarmayı unutmayalım:

import './styles.css';

Şimdi ayrı bir dosyada MiddleBox bileşenini oluşturalım:

function MiddleBox() {
	return (
		<p>middlebox</p>
	);
}

Ve onu büyük kutu BigBox içine yerleştirelim:

import MiddleBox from './MiddleBox';

function BigBox() {
	return (
		<div>
			<MiddleBox />
		</div>
	);
}

Aynı işlemi küçük kutu SmallBox için de yapalım:

function SmallBox() {
	return (
		<p>I am ... </p>
	);
}

İki tane küçük kutuyu MiddleBox içine yerleştirelim:

import SmallBox from './SmallBox';

function MiddleBox() {
	return (
		<div>
			<SmallBox />
			<SmallBox />
		</div>
	);
}

Ağacı kurduk. Ve şimdi App bileşenimizden, SmallBox bileşenine, prop'ları kullanmadan, bağlamı kullanarak (yaşasın kutu uygulamamız büyük boyutlara ulaştı) 'small box :)' dize değerini iletmek istiyoruz.

Bağlam dosyası MyContext.js'yi önceki derste zaten oluşturmuş ve bağlamıştık.

Yapacağımız bir sonraki adım - BigBox'yi, bağlam nesnemiz MyContext'nin bir özelliği olan bağlam sağlayıcısı ile sarmalamak. Artık bu yapının içine alınmış tüm bileşenler (ve bu, BigBox içine yerleştirilmiş tüm kutular) bağlama erişebilecek ve bağlamdaki değişikliklere abone olabilecek. Bağlam değeri olarak istediğimiz 'small box :)' değerini iletiyoruz:

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

Ve şimdi geriye kalan, bağlam değerini okumak. Onu SmallBox içinde kullanmak istiyorduk, bu yüzden bağlam dosyası MyContext.js'yi ve useContext kancasını oraya aktaralım:

import { useContext } from 'react';
import { MyContext } from './MyContext.js';

useContext kullanarak bağlam değerini name değişkenine okuyalım:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>I am ... </p>
		</div>
	);
}

SmallBox bileşenini bu bağlama abone ettik ve eğer bağlam değişirse, bu bileşen de güncellenecek.

Ve son olarak, üç nokta yerine name değişkeninin değerini koyalım:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>I am {name} </p>
		</div>
	);
}

Boş App bileşeninde Parent bileşenini, onun içinde Daughter bileşenini, ve Daughter içinde Grandson bileşenini oluşturun. Bağlamı kullanarak, App'den 42 yaş değerini iletin ve useContext kullanarak onu Daughter bileşeninde görüntüleyin.

Ve şimdi Grandson bileşeninde yaş değerini görüntüleyin, ancak 2'ye bölünmüş halini.