React.js'deki Bağlam

Proplar, React bileşenlerine iletilen argümanlardır. React'te, ana bileşenden alt bileşene veri aktaran aksesuarlar kullanıyoruz. Bazen, ebeveynden torun bileşenine veri aktarmamız gerekir ve ihtiyaç duyduğumuz şekilde torun bileşenini zenginleştirene kadar bileşenin her adımında aksesuarlar yazmamız gerekir, eğer ebeveynden çocuğa üç seviyemiz varsa, bu bir çok sayıda yazı malzemesi.

Verileri adım adım değil, doğrudan torun bileşenine aktarmanın yolları vardır. bir yol, bir mağaza oluşturmanın ve o mağazadaki önemli verileri toplamanın ve mağaza içindeki herhangi bir veriyi istediğimiz herhangi bir bileşene kullanmanın bir yolu olan React-Redux'tur.

başka bir yol da bağlamı kullanmaktır, yani temelde yeni bir bileşen oluşturur, bu yeni bileşen değer olarak eklediğimiz tüm verilere sahiptir ve bu bileşeni diğer bileşenlerle çevreler. Böylece bu değeri çevreleyen bileşenlerle paylaşabiliriz.

Bu kavramı bir örnekle açıklayalım;

Bu örneği, konsepti çok güzel ve akıcı bir şekilde açıklayan bir YouTube videosundan aldım.

Bu örnekle, adları, fiyatları ve kimlikleri ile 3 film içeren bir film dizimiz var. Bu uygulama ile bu özellikleri tarayıcıda göstereceğiz.

Aşağıdaki resimde bir uygulama klasörüm var ve bu klasöre ait 3 bileşen var ve bunları MovieProvider ile çevreliyor.

<Film Sağlayıcı >

<Gezinti />

<Film Listesi />

<Film Ekle />

<Film Sağlayıcı />

Bu MovieProvider'dan birazdan bahsedeceğim.

MovieContext.js dosyasını src içinde oluşturdum, bu dosya temel olarak tüm film verilerini useState ile depoluyor.

Tüm filmleri içeren bu dosyaya sahibiz, bu filmleri props işlevini kullanmadan diğer bileşenlerde nasıl kullanabilirim?

Her şeyden önce, createContext'i tepkiden içe aktarmamız gerekiyor,

ve sonra bunu 4. satırdaki gibi bir const MovieContext'te güçlendirin,

Bunu ihraç ediyoruz çünkü bunu başka bileşenlerde kullanmamız gerekiyor.

Ayrıca, geri dönen tüm filmleri içeren MovieProvider işlevine sahibiz.

<MovieContext.Provider değeri={[filmler, setMovies]} >

{props.çocuklar }

</MovieContext.Provider value={[movies, setMovies]} >

MovieContext.Provider, alt bileşenlere veri aktarmanın bir yoludur, önce bağlamı oluşturduk, ardından bu <movieContect.Provider'ın sahip olduğu tüm çocuklara uygulayarak buna sağlayıcı nesnesine uyguladık.

useContext kavramına bakalım,

Aşağıdaki resimde görebileceğiniz gibi, App bileşenine ait bir MovieList bileşenimiz var, bu bileşenin yapabileceğimiz tüm filmlere, movie.map'e ve her film için <Movie />'ye sahip olması gerekiyor. bileşen,

Peki MovieContext'teki tüm filmleri bu bileşene nasıl buraya getireceğiz?

Bu nedenle, tüm filmleri MovieList bileşenine getirmek içinContext işlevini kullanıyoruz ve MovieContext'i içe aktarıyoruz. Bunu yaptığımızda MovieContext.Provider içindeki tüm değer MovieList bileşenine gelecek ve

11. satırda, filmleri bununla imzalıyoruz,

const [filmler, setMovies] = useContext(MovieContext)

gerisini her hareketin bireysel bileşenine sahip olmak için satır 16 ile yaparız.

Aşağıdaki resimde burada useContext kullanan başka bir bileşeni size göstermek için, bir Nav.js bileşenimiz var, bu da App.js'ye ait, MovieList bileşeninde yaptığımız kuralların aynısını uyguluyoruz, useContext'i içe aktarıyoruz ve satırı uyguluyoruz 8 useContext ile.

Hepsi bu kadar, tüm filmleri istediğiniz bileşeni istediğiniz yerde kullanabilirsiniz.

Kaynaklar