Hướng dẫn cơ bản về Kiểm tra Props trong ReactJS

Xin chào các bạnfuture nhà phát triển React! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những khái niệm quan trọng nhất trong React: Kiểm tra Props. Đừng lo lắng nếu bạn mới bắt đầu học lập trình; tôi sẽ hướng dẫn bạn từng bước, như tôi đã làm cho hàng trăm học viên trong những năm dạy học của mình. Hãy cùng bắt đầu hành trình thú vị này nhé!

Props là gì?

Trước khi chúng ta nhảy vào kiểm tra, hãy nhanh chóng回顾 lại props là gì. Trong React, props (viết tắt của properties) là cách để truyền dữ liệu từ thành phần cha đến thành phần con. Hãy nghĩ về chúng như các đối số bạn truyền vào một hàm. Chúng là chỉ đọc và giúp làm cho các thành phần của bạn trở nên linh hoạt và có thể tái sử dụng hơn.

Tại sao kiểm tra Props?

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bạn không muốn ai đó vô tình sử dụng giấy thay vì gạch, phải không? Tương tự như vậy, trong React, chúng ta muốn đảm bảo rằng đúng loại dữ liệu đang được truyền vào các thành phần của mình. Đây là lúc kiểm tra props phát huy tác dụng.

Kiểm tra props giúp chúng ta:

1. Phát hiện lỗi sớm
2. Làm cho mã của chúng ta dễ đọc hơn
3. Làm văn bản hướng dẫn cho các nhà phát triển khác

Bây giờ, hãy cùng tìm hiểu cách chúng ta có thể thực hiện kiểm tra props trong React!

PropTypes

React có một tính năng内置叫做 PropTypes cho phép chúng ta kiểm tra các props mà các thành phần nhận được. Nó giống như có một bảo vệ严格 nhưng thân thiện ở cổng vào của thành phần của bạn, kiểm tra xem mọi người (mỗi prop) có đúng giấy tờ để vào hay không.

Cài đặt PropTypes

Trước hết, chúng ta cần cài đặt PropTypes. Trong terminal của bạn, chạy lệnh:

npm install prop-types

Sau khi cài đặt, chúng ta có thể导入 nó vào tệp thành phần của mình:

import PropTypes from 'prop-types';

Sử dụng PropTypes

Hãy tạo một thành phần đơn giản để minh họa cách sử dụng PropTypes:

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

function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}

Greeting.propTypes = {
name: PropTypes.string
};

export default Greeting;

Trong ví dụ này, chúng ta đang告诉 React rằng prop name nên là một chuỗi. Nếu ai đó cố gắng truyền một số hoặc bất kỳ loại nào khác, React sẽ hiển thị một cảnh báo trong console.

Các bộ kiểm tra có sẵn

PropTypes cung cấp nhiều bộ kiểm tra khác nhau. Hãy xem xét một số bộ kiểm tra phổ biến nhất:

Bộ kiểm tra	Mô tả
PropTypes.string	Kiểm tra rằng prop là một chuỗi
PropTypes.number	Kiểm tra rằng prop là một số
PropTypes.bool	Kiểm tra rằng prop là một boolean
PropTypes.array	Kiểm tra rằng prop là một mảng
PropTypes.object	Kiểm tra rằng prop là một đối tượng
PropTypes.func	Kiểm tra rằng prop là một hàm

Hãy xem chúng trong hành động với một ví dụ phức tạp hơn:

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

function UserProfile({ name, age, isStudent, hobbies, address, onUpdate }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
<p>Student: {isStudent ? 'Yes' : 'No'}</p>
<p>Hobbies: {hobbies.join(', ')}</p>
<p>City: {address.city}</p>
<button onClick={onUpdate}>Update Profile</button>
</div>
);
}

UserProfile.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
isStudent: PropTypes.bool,
hobbies: PropTypes.array,
address: PropTypes.shape({
city: PropTypes.string,
country: PropTypes.string
}),
onUpdate: PropTypes.func
};

export default UserProfile;

Hãy phân tích này:

1. name: PropTypes.string.isRequired: Prop này phải là một chuỗi và nó là bắt buộc.
2. age: PropTypes.number: Prop này nên là một số, nhưng không bắt buộc.
3. isStudent: PropTypes.bool: Prop này nên là một boolean.
4. hobbies: PropTypes.array: Prop này nên là một mảng.
5. address: PropTypes.shape({...}): Prop này nên là một đối tượng với một hình dạng cụ thể.
6. onUpdate: PropTypes.func: Prop này nên là một hàm.

Bộ kiểm tra nâng cao

PropTypes cũng cung cấp các bộ kiểm tra nâng cao:

1. PropTypes.oneOf

Bộ kiểm tra này kiểm tra xem một prop có thuộc một bộ giá trị cụ thể hay không:

ColorPicker.propTypes = {
color: PropTypes.oneOf(['red', 'green', 'blue'])
};

2. PropTypes.oneOfType

Bộ kiểm tra này kiểm tra xem một prop có khớp với một trong několges loại hay không:

AgeDisplay.propTypes = {
age: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
])
};

3. PropTypes.arrayOf

Bộ kiểm tra này kiểm tra xem một prop có phải là một mảng của một loại cụ thể hay không:

NumberList.propTypes = {
numbers: PropTypes.arrayOf(PropTypes.number)
};

4. PropTypes.objectOf

Bộ kiểm tra này kiểm tra xem một prop có phải là một đối tượng với các giá trị của một loại cụ thể hay không:

Scores.propTypes = {
scores: PropTypes.objectOf(PropTypes.number)
};

Bộ kiểm tra tùy chỉnh

Đôi khi, các bộ kiểm tra内置 không đủ. Đó là khi các bộ kiểm tra tùy chỉnh đến cứu trợ! Dưới đây là một ví dụ:

function AgeValidator(props, propName, componentName) {
if (props[propName] < 0 || props[propName] > 120) {
return new Error(`Invalid prop ${propName} supplied to ${componentName}. Age must be between 0 and 120.`);
}
}

Person.propTypes = {
age: AgeValidator
};

Bộ kiểm tra tùy chỉnh này đảm bảo rằng tuổi phải nằm trong khoảng 0 đến 120.

Kết luận

Kiểm tra props giống như có một trợ lý robot thân thiện kiểm tra công việc của bạn. Nó giúp phát hiện lỗi sớm, làm cho mã của bạn robust hơn và служит документацией для других разработчиков (включая будущего вас!).

Nhớ rằng, trong khi kiểm tra props rất hữu ích trong quá trình phát triển, nó bị loại bỏ trong các bản xây dựng sản xuất vì lý do hiệu suất. Vậy, đừng phụ thuộc vào nó cho các kiểm tra bảo mật!

Tôi hy vọng hướng dẫn này đã giúp bạn hiểu về kiểm tra props trong React. Hãy tiếp tục luyện tập, tiếp tục lập mã, và quan trọng nhất, hãy tiếp tục vui vẻ! Nếu bạn bao giờ cảm thấy bế tắc, hãy nhớ rằng: ngay cả các ứng dụng React phức tạp nhất cũng được xây dựng một prop một lần. Bạn làm được!

Credits: Image by storyset