Konteks di React.js

Props adalah argumen yang diteruskan ke komponen React. di React, kami menggunakan props untuk mentransfer data dari komponen induk ke komponen anak. Terkadang, kita perlu meneruskan data dari komponen parent ke cucu dan kita harus menuliskan props di setiap langkah komponen sampai kita kaya ke komponen cucu sesuai kebutuhan, jika kita memiliki tiga level dari parent ke child, itu akan menjadi banyak alat tulis.

Ada cara untuk tidak mentransfer data langkah demi langkah, melainkan langsung ke komponen cucu. salah satu caranya adalah React-Redux, yang merupakan cara untuk membuat toko dan mengumpulkan data penting di toko itu dan menggunakan data apa pun di dalam toko untuk komponen apa pun yang kita inginkan.

cara lain adalah menggunakan konteks, yaitu pada dasarnya membuat komponen baru, komponen baru ini memiliki semua data yang kita tambahkan sebagai nilai, dan mengelilingi komponen ini ke komponen lain. Jadi dengan cara ini, kita bisa berbagi nilai itu dengan komponen di sekitarnya.

Mari kita jelaskan konsep ini dengan sebuah contoh;

Saya mengambil contoh itu dari video YouTube yang menjelaskan konsep dengan sangat baik dan lancar.

Dengan contoh ini, kami memiliki array film yang memiliki 3 film dengan nama, harga, dan id mereka. Dengan aplikasi ini kami akan menampilkan fitur-fitur tersebut di browser.

pada gambar di bawah ini, saya memiliki folder aplikasi dan 3 komponen milik folder itu, dan mengelilinginya dengan MovieProvider.

<Penyedia Film >

<Nav />

<Daftar Film />

<Tambah Film />

<Penyedia Film />

Saya akan menyebutkan MovieProvider ini sebentar lagi.

Saya membuat file MovieContext.js di dalam src, file ini pada dasarnya, menyimpan semua data film dengan useState.

Kami memiliki file ini yang memiliki semua film, bagaimana saya bisa menggunakan film-film itu di komponen lain tanpa menggunakan fungsi alat peraga?

Pertama-tama, kita perlu mengimpor createContext dari reaksi,

dan kemudian kuatkan ini dalam MovieContext const, seperti pada baris 4,

Kami mengekspor ini, karena, kami perlu menggunakan ini di komponen lain.

Kami juga memiliki, fungsi MovieProvider, yang memiliki semua film, kembali

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

{alat peraga.anak-anak }

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

MovieContext.Provider adalah cara untuk meneruskan data ke komponen anak, kita buat konteksnya terlebih dahulu, lalu kita terapkan ke objek penyedia untuk itu, berlaku untuk semua anak yang dimiliki <movieContect.Provider ini.

Mari kita lihat konsep useContext,

seperti yang Anda lihat pada gambar di bawah, kami memiliki komponen MovieList, yang termasuk dalam komponen App, komponen ini harus memiliki semua film yang dapat kami buat, movie.map dan memiliki <Movie /> untuk setiap film komponen,

Jadi bagaimana kita membawa semua film dari MovieContext ke komponen ini ke sini?

Jadi, kami menggunakan fungsi useContext, dan mengimpor MovieContext, untuk membawa semua film ke komponen MovieList. Ketika kita melakukan ini, semua nilai di dalam MovieContext.Provider akan datang ke komponen MovieList dan

di baris 11, kami menandatangani film dengan ini,

const [film, setMovies] = useContext(MovieContext)

kami melakukan sisanya dengan baris 16 untuk memiliki komponen individu setiap gerakan.

Hanya untuk menunjukkan kepada Anda komponen lain yang menggunakan useContext di sini pada gambar di bawah, kami memiliki komponen Nav.js, ini juga milik App.js, Kami menerapkan aturan yang sama seperti yang kami lakukan di komponen MovieList, kami mengimpor useContext dan menerapkan baris 8 dengan useContext.

Itu saja, Anda dapat menggunakan semua film di mana pun komponen yang Anda inginkan.

Sumber daya