[React] Sử dụng mẫu container trong React như thế nào?

Container component là gì?

Chúng ta không có một định nghĩa chính xác nào về container component cả, container component đơn giản là một React Component làm nhiệm vụ goi API để lấy dữ liệu và sau đó truyền nó xuống một React Component để kết xuất mã HTML.

Định nghĩa container

Để các bạn dễ hình dung tôi sẽ viết thử một container, container này sẽ thực hiện lấy thông tin của octocat

src/containers/OctocatContainer.jsx

import React, { useState, useEffect } from 'react';
import { Octocat } from '../components/Octocat';
export function OctocatContainer() {
  const [octocat, setOctocat] = useState(null);

  useEffect(() => {
    async function getOctocat() {
      // gọi hàm fetch với phướng thực mặc định là GET
      const response = await fetch('https://api.github.com/users/octocat');
      const body = await response.json();
      // sử dụng React Hook để thông tin octocat vào state
      setOctocat(body);
    }

    getOctocat();
  }, []); // tham số mảng rỗng thể hiện hàm effect không phụ thuộc vào đối tượng nào, nó tương đương với hàm componentDidMount

  return <Octocat {...octocat} />;
}

Trong ví dụ trên tôi có sử dụng thêm JSX spread attributes để tránh việc phải khai báo props cho Octocat component. Mẫu này đặc biệt có ý nghĩa đối với các component mà bạn cần khai báo nhiều props.

Định nghĩa component để kết xuất mã HTML

Sau khi có dữ liệu rồi thì chúng ta sẽ kết xuất nó ra HTML như sau:

src/components/Octocat/Octocat.jsx

import React from 'react';

export function Octocat(props) {
  const { login, avatar_url, name } = props;
  return (
    <ul>
      <li>{login}</li>
      <li>{name}</li>
      <li>
        <img src={avatar_url} alt={login} />
      </li>
    </ul>
  );
}

Như các bạn thấy, component trên chỉ làm nhiệm vụ bind dữ liệu lên màn hình mà thôi.

Cùng xem kết quả nhé 🙂