Proptypes trong ReactJS - Khám phá mọi điều về Proptypes

Tìm hiểu propTypes trong React

Trước khi phát hành phiên bản React 15.5.0, propTypes có sẵn trong  react package nhưng trong các phiên bản React mới hơn, bạn phải thêm phần phụ thuộc vào dự án của bạn. Bạn có thể thêm phần phụ thuộc vào dự án của mình bằng cách sử dụng lệnh dưới đây:

npm install prop-type --save

Chúng ta có thể sử dụng propType để xác thực bất kỳ dữ liệu nào chúng ta nhận được từ Props. Nhưng trước khi sử dụng nó, chúng ta sẽ phải thực hiện input nó. Thêm dòng dưới đây vào đầu tệp index.js của bạn: 

 nhập PropTypes từ 'prop-type';

Cách sử dụng propTypes trong React

Khi đã nhập propTypes, bạn đã có thể sẵn sàng làm việc với chúng. Cũng giống như defaultProps, propTypes cũng là các đối tượng trong đó khóa là tên prop và giá trị là kiểu của chúng. Cú pháp dưới đây cho thấy cách sử dụng propTypes:

ComponentClassName .propTypes { 

    

    propName1: PropTypes.string, 

    propName2: PropTypes.bool, 

    propName3: PropTypes.array , 

    . 

    . 

    . 

    . 

    propNamen: PropTypes. anyOtherType 

}

Trong Cú pháp trên, ComponentClassName là tên của lớp Component, anyOtherType có thể là bất kỳ kiểu nào mà chúng ta được phép chuyển làm prop. Đối với các Prop không xác thực loại dữ liệu được chỉ định bởi propTypes, một cảnh báo trên bảng điều khiển sẽ hiện ra. Dưới đây là một ví dụ về chương trình hoàn chỉnh sử dụng propTypes để xác thực để hiểu rõ hơn về ví dụ trên:

import PropTypes from 'prop-types';

import React from 'react';

import ReactDOM from 'react-dom';




// Component

class ComponentExample extends React.Component{

render(){

return(

<div>

{/* printing all props */}

<h1>

{this.props.arrayProp}

<br />




{this.props.stringProp}

<br />




{this.props.numberProp}

<br />




{this.props.boolProp}

<br />

</h1>

</div>

);

}

}




// Validating prop types

ComponentExample.propTypes = {

arrayProp: PropTypes.array,

stringProp: PropTypes.string,

numberProp: PropTypes.number,

boolProp: PropTypes.bool,

}




// Creating default props

ComponentExample.defaultProps = {




arrayProp: ['Ram', 'Shyam', 'Raghav'],

stringProp: "GeeksforGeeks",

numberProp: "10",

boolProp: true,

}




ReactDOM.render(

<ComponentExample />,

document.getElementById("root")

);

Output: 

Bạn có thể thấy trong chương trình trên  chúng ta đang chuyển prop có tên numberProp dưới dạng một chuỗi nhưng xác thực nó dưới dạng số. Tuy nhiên, mọi thứ được hiển thị hoàn hảo trên trình duyệt nhưng bảng điều khiển trình duyệt của chúng ta có thông báo cảnh báo. 

Thông báo này cho chúng ta biết rằng prop có tên numberProp dự kiến ​​sẽ chứa một giá trị số nhưng thay vào đó một giá trị chuỗi được chuyển. 

Trên đây là một số thông tin về Proptypes trong ReactJs bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về ReactJs qua khóa học lập trình ReactJs và các khóa học lập trình khác của Viện công nghệ thông tin T3H.