+1
Thắc mắc về cách sử dụng Class.contextType - React Context
Chào mọi người,
Hiện tại mình đang nghiên cứu về React Context.
React Context có 4 API là:
- React.createContext
- Context.Provider
- Class.contextType
- Context.Consumer
Trong đó, theo mình hiểu thì Class.contextType và Context.Consumer dùng khi muốn lấy giá trị của context.
Vì vậy, mình có làm 2 demo gần giống nhau.
Phần code sử dụng Context.Consumer:
const Red = () => (
<div className="red">
<AppContext.Consumer>{context => context.number}</AppContext.Consumer>
</div>
);
Phần code sử dụng Class.contextType:
class Red extends React.Component {
//static contextType = AppContext;
render() {
const value = this.context;
return (
<div className="red">{value.number}</div>
);
}
}
Red.contextType = AppContext;
Cái Context.Consumer thì ổn, còn Class.contextType thì kết quả ra không như mong đợi (this.context là object rỗng).
Vậy không biết là do mình hiểu sai hay triển khai sai phần nào vậy?
Nhờ mọi người xem hộ với nhé, xin cám ơn!
P/S: project trên CodeSandbox cho mọi người tham khảo:
Sử dụng Context.Consumer: https://codesandbox.io/s/xpxr9pn7ww
Sử dụng Class.contextType: https://codesandbox.io/s/0xmwn8o2kl
Thêm một bình luận
1 CÂU TRẢ LỜI
+4
Trong ví dụ thứ 2, bạn thiếu mất việc khai báo contextType rồi
Có 2 cách khai báo:
// Provider
const AppContext = React.createContext();
class AppProvider extends React.Component {
state = {
number: 10
};
static contextType = AppContext // Thêm dòng này
render() {
return (
<AppContext.Provider value={this.state}>
{this.props.children}
</AppContext.Provider>
);
}
}
// Hoặc
AppProvider.contextType = AppContext
Đây là ví dụ của bạn nhưng được sửa lại 1 chút 
https://codesandbox.io/s/2x4yr35m0n
Hình như bạn bị nhầm project rồi thì phải. Ví dụ thứ 2 của mình là về contextType cơ. Còn cái của bạn vẫn là Context.Consumer.
class AppProvider extends React.Component {
state = {
number: 10
};
static contextType = AppContext
render() {
return (
<AppContext.Provider value={this.state}>
{this.props.children}
</AppContext.Provider>
);
}
}
// Components
const Red = () => (
<div className="red">
<AppContext.Consumer>{context => context.number}</AppContext.Consumer>
</div>
);
Nghĩa là bạn vừa khai báo contextType và vừa dùng AppContext.Consumer.
Trong khi theo như ví dụ 1 của mình thì khi mình dùng AppContext.Consumer, bên trên mình không cần khai báo contextType vẫn được mà bạn.
Bạn xem lại hộ mình với nhé!
Bình luận này đã bị xóa
