React: Data-Driven Component

React: Data-Driven Component - Day 5

Giới thiệu

Data driven trong ReactJS là một phương pháp thiết kế ứng dụng web bằng cách sử dụng dữ liệu để khởi tạo và điều khiển các thành phần UI. Theo cách này, dữ liệu được lưu trữ trong state và props của các thành phần, và được truyền qua lại giữa chúng để cập nhật giao diện. Khi có sự thay đổi trong dữ liệu, ReactJS cập nhật lại giao diện ứng dụng một cách tự động, giúp cho trải nghiệm người dùng trở nên tuyệt vời hơn.

Tham khảo

Sử dụng props

Props là một khái niệm quan trọng trong ReactJS, được sử dụng để truyền dữ liệu từ một component cha sang một component con.

Props là viết tắt của properties, có nghĩa là thuộc tính. Props là một object được truyền vào trong một component, mỗi component sẽ nhận vào props và trả về react element. Props cho phép chúng ta giao tiếp giữa các component với nhau bằng cách truyền tham số qua lại giữa các component. Khi một component cha truyền cho component con một props thì component con chỉ có thể đọc và không có quyền chỉnh sửa nó bên phía component cha.

Đặc điểm Props

Đưa data từ component này sang component khác
Read-only đối với data ở child component
Giá trị của Props chỉ được modified bởi parent component.

Trong bài trước, chúng ta có 2 component là Header và Post

import React, { Component } from 'react';
class Header extends React.Component {
  render() {
    return (
      <div className="container-fluid p-5 bg-primary text-white text-center">
        <h1>My First Bootstrap Page</h1>
        <p>Resize this responsive page to see the effect!</p>
      </div>
    );
  }
}
export default Header

Post component

import React, { Component } from 'react';
import Header from './Header'; 
import Article from './Article';

class Post extends React.Component {
    render() {
      return (
        <>
          <Header />
          <Article />
        </>
      );
    }
  }

export default Post

Để gửi props vào một component, bạn sử dụng cú pháp giống như các thuộc tính HTML. Ở file Post.tsx, bạn cập nhật

<Header title="Header" />

File Header.tsx, cập nhật như sau:

import React, { Component } from 'react';
class Header extends React.Component {
  render() {
    return (
      <div className="container-fluid p-5 bg-primary text-white text-center">
        <h1>{this.props.title}</h1>
        <p>Resize this responsive page to see the effect!</p>
      </div>
    );
  }
}
export default Header

Sử dụng Javascript Object

Chúng ta sẽ truyền javascript object từ Post sang Header component. Cập nhật Post như sau:

class Post extends React.Component {
    render() {
      const headers = {
        title: "Computer Hope",
        subTitle: "Free computer help since",
        year: 1988
      };
      return (
        <>
          <Header headerContent={headers} />
          <Article />
        </>
      );
    }
}

Ở file Header

import React, { Component } from 'react';
class Header extends React.Component {
  render() {
    const {headerContent} = this.props;
    return (
      <div className="container-fluid p-5 bg-primary text-white text-center">
        <h1>{headerContent.title}</h1>
        <p>{headerContent.subTitle} {headerContent.year}</p>
      </div>
    );
  }
}
export default Header

Trong ES 6, cả 2 câu lệnh này tương đương

const {headerContent} = this.props;
const headerContent = this.props.headerContent;

Sử dụng utility types trong Typescript

“Utility types” trong TypeScript là các kiểu dữ liệu được tích hợp sẵn giúp cho việc biến đổi kiểu dữ liệu trở nên dễ dàng hơn.

Tham khảo: https://www.typescriptlang.org/docs/handbook/utility-types.html

Pick<T,K>

Sử dụng pick để tạo ra type mới từ 1 type trước đó với chỉ 1 số key cần thiết.

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

Ví dụ

type Person = { name: string; age: number }
type Name = Pick<Person , 'name'>;

const n: Name = {name: 'John'}; // ok
const err: Name = {name: 'John', age: 26} // error

Áp dụng cho đoạn code Header component

class Post extends React.Component {
    render() {
      const headers = {
        title: "Computer Hope",
        subTitle: "Free computer help since",
        year: 1988,
        note: "Taiwan 1999"
      };

      type headers1 = Pick<typeof headers, "title" | "subTitle" | "year">;
      const headers2: headers1 = {
        title: headers.title,
        subTitle: headers.subTitle,
        year: headers.year
      };

      return (
        <>
          <Header headerContent={headers2} />
          <Article />
        </>
      );
    }
}

Omit<T,K>

Sử dụng Pick rất tiện lợi. Tuy nhiên đôi khi chúng ta muốn làm ngược lại. Chúng ta cần tạo 1 type bao gồm tất cả trừ 1 vài field từ 1 type trước đó.

Cú pháp

ctype Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

Ví dụ

type Person = { name: string; age: number }

type Name = Omit<Person , 'age'>;

const n: Name = {name: 'John'}; // ok
const err: Name = {name: 'John', age: 26} // error

Áp dụng cho đoạn code Header component

class Post extends React.Component {
    render() {
      const headers = {
        title: "Computer Hope",
        subTitle: "Free computer help since",
        year: 1988,
        note: "Taiwan 1999"
      };

      type headers2 = Omit<typeof headers, "note">
      const headers22 : headers2 =  {
        title: headers.title,
        subTitle: headers.subTitle,
        year: headers.year
      };

      return (
        <>
          <Header headerContent={headers22} />
          <Article />
        </>
      );
    }
}

Hiển thị List

Khởi tạo Static List như sau:

import React, { Component } from "react";
class People extends React.Component {
  render() {
    return (
      <div className="container mt-5">
        <div className="row">
          <div className="col-sm-12">
            <table className="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Age</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Franklin Delano</td>
                  <td>Roosevelt</td>
                  <td>63</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>George</td>
                  <td>Washington</td>
                  <td>67</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Abraham</td>
                  <td>Lincoln</td>
                  <td>56</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}
export default People;

Để hiển thị dynamic cho danh sách People, bạn cần khai báo danh sách People như sau:

const headers = {
	title: "Computer Hope",
	subTitle: "Free computer help since",
	year: 1988
  };
const people = [
	{ id: 1, firstName: "Franklin Delano", lastName: "Roosevelt", age: "63" },
	{ id: 2, firstName: "George", lastName: "Washington", age: "67" },
	{ id: 3, firstName: "Abraham", lastName: "Lincoln", age: "56" }
  ];
return (
	<>
	  <Header headerContent={headers} />
	  <Article />
	  <People people={people} />
	</>
);

Ở component People.jsx, bạn khai báo biến people, nhận data từ this.props

const { people } = this.props;

Hiển thị danh sách People

{people.map((person, index) => (
                  //your code here
                ))}

Phương thức array.prototype.map là một hàm JavaScript tạo ra một mảng mới bằng cách áp dụng một hàm gọi lại cho mỗi phần tử của mảng ban đầu. Tham số cho hàm callback gồm phần tử hiện tại (current element), index, và mảng ban đầu.

const array = [1, 2, 3, 4];
const map = array.map((x, index) => {
  console.log(index); // prints 0, 1, 2, 3
  return x + index; // adds the index to each element
});
console.log(map); // prints [1, 3, 5, 7]

Quay trở lại ví dụ, chúng ta thêm phần hiển thị firstName, lastName vào table

<tbody>
{people.map((person, index) => (
  <tr>
	<th scope="row">{person.id}</th>
	<td>{person.firstName}</td>
	<td>{person.lastName}</td>
	<td>{person.age}</td>
  </tr>
))}
</tbody>

Xử lý error: Each child in a list should have a unique "key" prop

Mở console khi chạy trang web, bạn sẽ gặp thông báo:

... Warning: Each child in a list should have a unique “key” prop.

Lý do là React cần xác định phần tử duy nhất trong 1 list. Nếu trạng thái của react element thay đổi, React cần xác định nhanh phần tử nào thay đổi, và real element ở đâu để phản ánh sự thay đổi. Để khắc phục, bạn thêm attribute key vào element

<tbody>
{people.map((person, index) => (
  <tr key={index}>
	<th scope="row">{person.id}</th>
	<td>{person.firstName}</td>
	<td>{person.lastName}</td>
	<td>{person.age}</td>
  </tr>
))}
</tbody>

Component Person

Chúng ta sẽ phân tách component People thành component nhỏ hơn, cụ thể là component Person

import React, { Component } from "react";

class Person extends React.Component {
  render() {
    const { person } = this.props;
    return (
        <tr id={person.id}>
            <th scope="row">{person.id}</th>
            <td>{person.firstName}</td>
            <td>{person.lastName}</td>
            <td>{person.age}</td>
        </tr>
    );
  }
}
export default Person;

Update lại Component People

<tbody>
	{people.map((person, index) => (
	  <Person key={index} person={person} />
	))}
  </tbody>

Hi vọng bài viết này sẽ giúp bạn chia nhỏ Component và xử lý data thật dễ dàng.

Nhatkyhoctap's blog

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Nhật ký học tập

Tìm kiếm Blog này