Context trong React
Hi mọi người hôm nay mình sẽ nói về 1 useContext() hook trong React nha.
Context cung cấp phương pháp để chia sẻ những giá trị giữ các component với nhau
Mình có cây component sau: App(status: false) -> Header -> Menu -> User -> Profile
Mình muốn truyền 1 dât từ App sang component Profile sẽ gặp vấn đề Props Drilling (truyền props thông qua nhiều component)
Context sẽ giúp mình truyền từ component cha xuống thằng component cháu, chắc luôn mà không cần thông qua các component trung gian nữa hehe
3 bước đơn để tạo context
1
2
3
4
5
6
7
8
9
10
11
12
import
{
createContext
}
from
“react”
;
//B1. Tạo context
export
const
StatusContext
=
createContext
(
)
;
// export để component con cháu sẽ có thể dùng được
// StatusContext trả về 1 Object có Provider và Consumer
//B2. Dùng provider cho component cha nhận được dữ liệu để component con có thể sử dụng được
// Thằng Provider sẽ bọc component cha
<
StatusContext
.
Provider
value
=
{
false
}
>
<
Component
–
Child
>
<
StatusContext
.
Provider
>
Với Provider sẽ có prop là value. Value nhận dữ liệu gì thì toàn bộ các childrent trong Provider đều có thể nhận được value đó
Ở component con Component-Child
1
2
3
4
5
6
import
{
useContext
}
from
“react”
;
import
{
StatusContext
}
from
“nơi export context”
;
// Để nhận được dữ liệu từ component cha thì có hook useContext() React viết sẵn để nhận data rồi hehe
const
value
=
useContext
(
StatusContext
)
;
// value sẽ là giá trị mà ở Provider component cha truyền vào
Và tới đây ở component con có data từ component cha truyền qua rồi thì thoải mái dùng thôi, không cần quan tâm từ component cha qua mình có bao nhiêu trung gian nữa hehe.
