Sử dụng PropTypes trong ReactJS

4 năm trước · 3 phút đọc

Trong thực tế khi truyền dữ liệu cho các component chúng ta sẽ gặp các vấn đề liên quan đến kiểu dữ liệu. Đối với một ứng dụng React thông thường chúng ta có thể sử dụng Flow hoặc TypeScript để giải quyết những vấn đề trên. Nhưng vẫn có một giải pháp khác đấy chính là sử dụng PropTypes.

1. PropTypes là gì

PropType là một trình xác thực các props truyền vào là hợp lệ. Vì lí đo performance (hiệu suất), thì propTypes sẽ chỉ được kiểm tra trong môi trường development mode.

2. Cài đặt

Chạy lệnh npm install --save prop-types ngay tại thư mục chứa dự án của các bạn để cài đặt PropTypes.
Để kiểm tra props của 1 component, chúng ta import thư viện vào đầu file để kiểm tra tính hợp lệ của các prop

import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types');  // ES5

3. Kiểm tra tính hợp lệ của prop với PropTypes

Ở đây chúng ta có 1 component Button như sau

import PropTypes from 'prop-types'

function Button({
    large,
    small,
    rounded,
    disable,
    onClick
}) {

    return (
        <Button className={classNames({
            'small': small,
            'large': large,
            'disable': disable,
            'rounded': rounded
        })} 
        onClick={onClick}
        >
            {children}
        </Button>
    )
}

Nhìn vào đoạn mã trên chúng ta cũng đoán được rằng prop title có kiểu là string, onClick là một hàm callback, các prop còn lại có kiểu là boolean. Để xác định kiểu cho các prop trên, trước khi export chúng ta sẽ thêm một thuộc tính propTypes cho component Button.

Button.propTypes = {
    small: PropTypes.bool, // kiểu boolean 
    large: PropTypes.bool,
    disable: PropTypes.bool,
    rounded: PropTypes.bool,
    onClick: PropTypes.func.isRequired // Kiểu function và là một props bắt buộc phải có
}

Trong môi trường development mode, khi chúng ta cố tình truyền sai kiểu dữ liệu của một prop thì trong console của trình duyệt nó sẽ cảnh báo cho chúng ta:

 <Button small='false'>Log in</Button>

Hoặc khi một prop là bắt buộc mà chúng ta không truyền thì cũng sẽ xuất hiện cảnh báo trong console:

Các bạn có thể xem thêm các kiểu xác thực dành cho các kiểu dữ liệu khác tại github của PropTypes.

Khi JSX, nếu một prop ta truyền một prop mà không kèm theo giá trị thì nó sẽ có giá trị là true, nhưng nếu prop đấy chúng ta không truyền prop đó thì nó sẽ có giá trị là undefine.

<Button large onClick={() => alert('Clicked!')} >Click me! </Button>
// large: true
// small: undefine
// disable: undefine
// rounded: undefine
// onClick: () => alert(''Clicked!)

Nhưng chúng ta mong muốn rằng khi không truyền gì cả thì nó sẽ nhận giá trị là false. Vậy nên chúng ta cũng có thể thêm một thuộc tính defaultProps trước khi export để xác định giá trị mặt định cho các prop khi chúng ta không truyền gì cả.

Button.defaultProps = {
    small: false,
    large: false,
    rounded: false,
    disable: false
}

Đây là lần đầu tiên mình viết blog, có thiếu sót gì thì mong các bạn comment góp ý nhé 😊

Hoàng Nguyễn

Sử dụng PropTypes trong ReactJS