Bereaksi menggunakan Kait Konteks
Konteks Reaksi
React Context adalah cara untuk mengelola status secara global.
Ini dapat digunakan bersama dengan useStateHook untuk berbagi status antara komponen yang sangat bersarang dengan lebih mudah daripada dengan useStatesendiri.
Masalah
Status harus dipegang oleh komponen induk tertinggi dalam tumpukan yang memerlukan akses ke status.
Sebagai ilustrasi, kami memiliki banyak komponen bersarang. Komponen di bagian atas dan bawah tumpukan memerlukan akses ke status.
Untuk melakukan ini tanpa Konteks, kita perlu meneruskan status sebagai "alat peraga" melalui setiap komponen bersarang. Ini disebut "pengeboran penyangga".
Contoh:
Melewati "alat peraga" melalui komponen bersarang:
import { useState } from "react";
import ReactDOM from "react-dom";
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</>
);
}
function Component2({ user }) {
return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}
function Component4({ user }) {
return (
<>
<h1>Component 4</h1>
<Component5 user={user} />
</>
);
}
function Component5({ user }) {
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));
Meskipun komponen 2-4 tidak membutuhkan state, mereka harus melewati state tersebut agar dapat mencapai komponen 5.
Dapatkan Sertifikasi!
$95 DAFTAR
Solusinya
Solusinya adalah dengan menciptakan konteks.
Buat Konteks
Untuk membuat konteks, Anda harus Mengimpor createContextdan menginisialisasinya:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Selanjutnya kita akan menggunakan Context Provider untuk membungkus pohon komponen yang membutuhkan keadaan Context.
Penyedia Konteks
Bungkus komponen anak di Penyedia Konteks dan berikan nilai status.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Sekarang, semua komponen di pohon ini akan memiliki akses ke Konteks pengguna.
Gunakan useContextKait
Untuk menggunakan Konteks dalam komponen anak, kita perlu mengaksesnya menggunakan useContextHook.
Pertama, sertakan useContextdalam pernyataan impor:
import { useState, createContext, useContext } from "react";
Kemudian Anda dapat mengakses Konteks pengguna di semua komponen:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Contoh Lengkap
Contoh:
Berikut adalah contoh lengkap menggunakan React Context:
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));