Skip to main content

Master Proptypes trong React


React là một thư viện JavaScript cho việc xây dựng giao diện người dùng (UI). React giúp quản lý dễ các trạng thái (state) của ứng dụng hơn và sẽ thay đổi UI khi mà state thay đổi.

React dựa vào các component và mỗi component có state của nó. Nếu như là state của component dùng setState() và có thể thể props từ component cha.

The Problem

Từ khi Reatc là một thư viện JavaScript và JS không cung cấp bất cứ thứ gì về type-checking, bỏ qua việc đó khi sử dụng props component có thể khiến bạn gặp bugs trong ứng dụng.

Solution

Bạn có thể dùng Js extensions như TypeScript cho việc checking, nhưng nếu bạn không muốn sử dụng nó, React cung cấp đầy đủ cho tính năng type-checking verify props của các component chính xác type. Sử dụng PropTypes, bạn có thể chắc chắn các component nhận đúng type của props.

Ví dụ, ta có Person component và nhận 2 props: `name` và `age`. Sử dụng PropTypes, ta có thể chắc chắn `name` luôn luôn là `string` và `age` luôn luôn là number.

Installing PropTypes

Để sử dụng PropTypes, ta phải cài đặt prop-type package của React. Ví dụ:


Using PropTypes

Đầu tiên ta import PropTypes từ prop-types package. Ví dụ:


Ở đây propTypes là một object chứa key-value, trong đó thì key là tên của prop và value là giá trị của prop mà chúng ta có thể nhận trong component.

Example

Nếu ta có Student component và nhận 2 props: name và age. Trong đó name có type là string và age là number.


PropTypes.string và PropTypes.number là prop được xác thực props khi nhận được là đúng type. PropTypes có một số kiểu xác thực (validators) như:


PropTypes in Functional Components


Requiring Props

Để bắt buộc prop luôn được nhận từ component cha, ta dùng thêm `isRequired` để validator prop. Ví dụ:


Giả sử nếu như Component cha của Student component chỉ truyền `age` và không truyền name thì sẽ hiện Warning như sau:


Requiring Single Child

Nếu ta dùng PropTypes.element để render single child như sau:



Nếu bạn thử render nhiều hơn 1 component truyền vào trong component Container thì sẽ Warning. Ví dụ: 


Advance PropTypes Validators

Ta có thể checking từng object của array, ví dụ tôi dùng PropTypes.arrayOf() để xác định từng phần tử trong mảng.



Và nếu như bạn thử truyền props là string thì sẽ bị Warning như ví dụ sau:


Điều này cũng tương tự với Object bằng cách sử dụng PropTypes.objectOf().

Conclusion

Qua những ví dụ trên ta có thể hiểu hơn về PropTypes và làm như nào để có thể type-checking. Bằng những thủ thuật nhỏ như vậy ta có thể tránh được những lỗi cơ bản trong ứng dụng của mình. Hy vọng bài viết hữu ích với mọi người.

Thanks for watching !

Resource: blog.bitsrc.io

Comments

Popular posts from this blog

Hướng dẫn cài LibreOffice trên Kali Linux

Xin chào mọi người ! Một số bạn không biết cài bộ công cụ văn phòng nào cho máy tính cài HĐH Kali Linux. Hôm nay mình sẽ hướng dẫn cho các bạn cài  LibreOffice trên Kali Linux. Nó giống như bộ Office của Microsoft và trên thực tế thì không bằng Microsoft được đâu. Việc cài đặt bộ Office này khá là đơn giản. Đầu tiên để cài thì bạn hãy tải LibreOffice phù hợp với phiên bản của máy tính đang sử dụng. Như của mình hiện tại là phiên bản LibreOffice_5.2.4 + Link Download (Download) Hãy tải phiên bản mới nhất có đuôi *.deb cho dễ cài đặt. Sau khi tải xong có 2 cách để các bạn cài đặt nó: + Cách 1: Sử dụng phần mềm Gdebi để cài đặt các file *.deb một cách dễ dàng. Tuy nhiên rất hay bị lỗi và không cài đặt được. + Cách 2: (Nên theo cách này) 1- Giải nén file LibreOffice ra. 2- Mở Terminal ra gõ:   ~# cd Downloads Các bạn có thể dùng lệnh ls để biết chính xác tên thư mục của mình và copy paste cho chuẩn. Tiếp sau đó thì gõ:   ~# cd LibreOffice_5....

Tạo ứng dụng realtime với Firebase Database và ReactJS

Hello cả nhà ! Như các bạn cũng đã biết thì Firebase được tạo bởi "Ông lớn Google", bởi vậy lên việc sử dụng Firebase khá an toàn và tiên dụng. Mọi người có thể vô trang chủ của Firebase tại địa chỉ:  Firebase Google  . Firebase có rất nhiều tính năng vô cùng tuyệt vời như: Storage, Database, Hosting, Function, Authentication, ML Kit. Hôm nay mình xin phép làm một demo nhỏ cho tạo ứng dụng realtime bằng cách sử dụng Firebase Database với ReactJS . Bài viết này mình xin hướng dẫn các bước chuẩn bị trước khi vô code. Đầu tiên các bạn vô trang chủ của Firebase, và tới Firebase console. Sau khi vô tới Console Firebase các bạn nhấn vô Add a Project để tạo 1 dự án mới. Các bạn nhập tên cho project của mình,  nó sẽ tự random ID project cho các bạn theo tên của project mà các bạn đã đặt. Điền hoàn tất thì nhấn Tạo và chờ vài giây để cho nó tạo Thành công. Tạo project xong các bạn chọn tiếp tới tạo Database, và chúng ta cũng chỉ quan tâm đến nó ...

Javascript kiểm tra Array chính xác hơn bằng Array.isArray

Các dev Javascript có thể điều biết, arrays is not true arrays . Mọi thứ trong javascript đều là object. Một cách điều hiểu điều đó rõ nhất là sử dụng typeof để kiểm tra nó, và tất nhiên nó sẽ là object. LOL Vậy làm sao để kiểm tra chính xác một phần tử có phải là array hay không trong javascript ? Đó đã không còn là vấn đề với Array.isArray(). Đây là các đơn giản để kiểm tra chính xác giá trị có phải là mảng hay không. Array is not true array Hãy xem ví dụ dưới để hiểu hơn, array is not true array Đó chính là lý do tại sao ta không lên dùng typeof để kiểm tra array. Array.isArray() demo Ví dụ dưới đây đều là array và đều return về true