Provider

Context.Provider ile değer sağlamayı öğrenirsin.

Provider nedir?

Provider context'e değer sağlayan bileşendir. Her context nesnesinin .Provider özelliği vardır: <ThemeContext.Provider value={theme}>...</ThemeContext.Provider>. Provider'ın altındaki tüm bileşenler bu değere erişebilir.

Provider'ın value özelliği zorunludur; bu prop olmadan çalışmaz. Değer değiştiğinde tüm tüketen alt bileşenler yeniden render edilir. Birden çok Provider iç içe geçebilir; en içteki değer kazanır. Uygulamanın köküne bir kez koyarak tüm ağacı sarmak yaygın bir desendir.

Provider kullanımı

Provider'ı uygulamanın üst kısmında sarıcı olarak kullanırsın. Örneğin <ThemeContext.Provider value="dark"><App /></ThemeContext.Provider> yazdığında App ve altındaki tüm bileşenler theme değerine erişir.

Değer genellikle state'ten gelir: const [theme, setTheme] = useState("dark") yazıp value={theme} verirsin. Böylece kullanıcı temayı değiştirdiğinde tüm alt bileşenler güncellenir. Provider iç içe de geçebilir; örneğin hem ThemeContext.Provider hem LocaleContext.Provider aynı kökü sarabilir.

Uygulama Provider ile sar

Bir App bileşeni yaz. useState ile theme tut (ilk değer "dark"). <ThemeContext.Provider value={theme}> ile <Text>Tema</Text>'i sar. ThemeContext'i dışarıda tanımla.

Örnek çözümü göster

import { createContext, useState } from "react";
import { Text } from "react-native";

const ThemeContext = createContext(null);

function App() {
  const [theme, setTheme] = useState("dark");
  return (
    <ThemeContext.Provider value={theme}>
      <Text>Tema</Text>
    </ThemeContext.Provider>
  );
}

Kendini test et

Parçayı rolüne eşle

Provider

Değeri sağlar
value

Sağlanan veri
useContext

Değeri okur
createContext

Context'i oluşturur

Provider kullan

<ThemeContext.Provider ____={theme}><App /></ThemeContext.Provider>

Cevabı göster

<ThemeContext.Provider value={theme}><App /></ThemeContext.Provider>

Provider'ın hangi prop'u zorunludur?
```
<ThemeContext.Provider value={theme}>
  <App />
</ThemeContext.Provider>
```
- children
- style
- value
- key
Cevabı göster

value — Provider bu prop olmadan çalışmaz.

Sıradaki ders: useContext

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler