Yêu cầu Nov 22nd, 2018 7:21 a.m. 544 1 1
  • 544 1 1
+1

Thắc mắc về cách sử dụng Class.contextType - React Context

Chia sẻ
  • 544 1 1

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.contextTypeContext.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

1 CÂU TRẢ LỜI


Đã trả lời Nov 22nd, 2018 7:47 a.m.
+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

Chia sẻ
Avatar Lam Pham @completejavascript
Nov 22nd, 2018 8:04 a.m.

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é!

Avatar Lam Pham @completejavascript
Nov 22nd, 2018 8:04 a.m.
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí