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:

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

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

App.jsximport 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:

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

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

App.jsximport './styles.css';

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

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

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

BigBox.jsximport MiddleBox from './MiddleBox';

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

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

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

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

MiddleBox.jsximport 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:

App.jsxfunction 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:

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

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

SmallBox.jsxfunction 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:

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