Sử dụng context trong React

Sử dụng context trong React để truyền các giá trị cho component theo cách dễ dàng hơn trong các ứng dụng có nhiều cấp component.

---

Context trong React

Trong ứng dụng ReactJS, dùng context để truyền dữ liệu giữa các component. Dùng context, dữ liệu được truyền xuống các component con tự động mà không phải truyền qua từng  cấp component. Do đó có thể dùng context để xử lý các dữ liệu global như user info, cart…

Tạo context trong react

Tạo 1 đối tượng context theo cú pháp như sau:

const MyContext = React.createContext();

Mỗi đối tượng context khi được tạo ra chứa 2 thành phần quan trọng là provider và consumer.  Provider dùng để cung cấp giá trị còn Consumer nhận về giá trị của context.

Ví dụ 1: Xóa code trong App.js và code lại

import React from 'react';
const MyContext = React.createContext(); 
function App() {
  return (
    <div>
      <MyContext.Provider value={'Hôm nay thứ hai'}>
        <MyContext.Consumer>
          {value => <h3> {value.toUpperCase()}</h3>}
        </MyContext.Consumer>
      </MyContext.Provider>
    </div>
  );
}
export default App;

Class.contextType: contextType là một thuộc tính của class được tạo bởi React.createContext() được dùng để lấy giá trị của context. Cách dùng như sau:

class MyClass extends React.Component {  
  render() { let value = this.context; //giá trị từ provider}
}
MyClass.contextType = MyContext;

Nhờ có gán contextType cho class mà code bên trong class mới dùng được các giá trị trong context.

Ví dụ 2: Xóa code trong App.js và code lại

import React from 'react';
const MyContext = React.createContext(); 
class Info extends React.Component{  
  render() { 
    let cart = this.context;
    return (<div> 
             <p>Số SP : {cart.SoSP}</p>
             <p>Tiền: {cart.ThanhTien}</p>
            </div>
           )}
  }
Info.contextType = MyContext;

function App() {
  return (
    <div>
      <MyContext.Provider value={ {ThanhTien:125000, SoSP:5}  } >
        <MyContext.Consumer>
          { () => <Info/>} 
        </MyContext.Consumer>
      </MyContext.Provider>
    </div>
  );
}
export default App;

Ví dụ 3a: Truyền giá trị không dùng context. Xóa code trong App.js và code lại.

import React from 'react';
const message = "Ông có người yêu";
const OngNoi = () => { return <Cha message={message} /> }
const Cha = (props) => { return <Chau {...props} />}
const Chau=(props)=>{return<p>Trời ơi ông bảo <b>{props.message}</b></p>}

function App() { return (<OngNoi/>)}
export default App;

Ví dụ 3b: Truyền giá trị dùng context. Xóa code trong App.js và code lại.

import React from "react"; 
const MyContext = React.createContext();
class Chau extends React.Component {
  render() {return <p>Trời ơi ông bảo <b>{this.context}</b></p>}
}
Chau.contextType = MyContext;
 
let m = "Ông có người yêu";
const ÔngNội = () => {
  return ( <MyContext.Provider value={m}>
               <Chau />
           </MyContext.Provider>
        )
}
export default ÔngNội;

Kết quả cũng được như trên

Redux và context