Props Validation trong ReactJS

1. Props Validation:

Props Validation trong ReactJS là một cách để kiểm tra rằng component con nhận được các props chính xác theo yêu cầu. Điều này giúp tăng tính bảo mật và sạch sẽ của code của bạn.

Ví dụ:

import React from 'react';
import PropTypes from 'prop-types';

const WelcomeMessage = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

WelcomeMessage.propTypes = {
  name: PropTypes.string.isRequired
};

export default WelcomeMessage;

Trong ví dụ trên, chúng ta sử dụng thư viện PropTypes để định nghĩa kiểu dữ liệu cho thuộc tính name.

Trong trường hợp name không phải là một chuỗi, React sẽ in ra một lỗi trong console.

2. Các loại Proptypes:

Có nhiều loại kiểu dữ liệu có sẵn trong thư viện PropTypes trong React, bao gồm:

• array: một mảng.
• bool: một giá trị boolean.
• func: một hàm.
• number: một số.
• object: một đối tượng.
• string: một chuỗi.
• symbol: một symbol.
• node: bất kỳ kiểu dữ liệu nào có thể được render trong React (chuỗi, số, element hoặc component).
• element: một element của React.
• arrayOf(type): một mảng của các phần tử có kiểu dữ liệu type.
• objectOf(type): một đối tượng có các giá trị có kiểu dữ liệu type.
• oneOf(array): một giá trị trong mảng array.
• oneOfType(array): một giá trị có kiểu dữ liệu trong mảng array.
• shape(object): một đối tượng với cấu trúc như object.

Ví dụ:

import React from 'react';
import PropTypes from 'prop-types';

const User = (props) => {
  return (
    <ul>
      <li>Name: {props.name}</li>
      <li>Age: {props.age}</li>
      <li>Email: {props.email}</li>
    </ul>
  );
};

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  email: PropTypes.string.isRequired
};

export default User;

Trong ví dụ trên, chúng ta định nghĩa rằng thuộc tính name và email là bắt buộc phải có, trong khi thuộc tính age là tùy chọn. Nếu bạn truyền vào component mà không có thuộc tính name và email , React sẽ báo lỗi ở Console.