React: Proptypes - Day 8

Proptypes là gì?

Proptypes là một thư viện được cung cấp bởi React để giúp chúng ta xác thực các props được truyền vào component. Proptypes giúp chúng ta tránh được các lỗi do dữ liệu không hợp lệ gây ra, cải thiện tính ổn định và khả năng tái sử dụng của component.

Ví dụ

Trường hợp không sử dụng Proptypes

Khi không sử dụng proptypes, chúng ta phải tự kiểm tra tính hợp lệ của props trong component. Điều này có thể gây ra các lỗi khó phát hiện, đặc biệt là trong các ứng dụng phức tạp.

Ví dụ tạo một header component, chỉ nhận header value với chiều dài < 10

import React from 'react';

interface HeaderProps {
    name: string;
}

const Header: React.FC<HeaderProps> = ({ name }) => {

    if (name.length > 10) {
        console.error('Invalid header');
        return <></>
    }

    return <h2>Hello, {name}!</h2>;
};

export default Header;

File app.tsx

import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import './App.css'
import Header from './components/header';

function App() {

  return (
    <Container>
        <Row>
        <Col xs={6}>
            <h1>Demo Proptypes</h1>
            <Header name='My ASP.NET CORE IDENTITY' />
            <Header name='123' />
          </Col>
        </Row>
      </Container>
  )
}

export default App

Sử dụng PropTypes

Cài đặt

npm install prop-types
# or
yarn add prop-types

Để sử dụng Proptypes, bạn import như sau:

import PropTypes from 'prop-types';

Khai báo khi sử dụng Class Component:

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

Trường hợp sử dụng Functional component:

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

const MyComponent = ({ name }) => {
  return <div>{name}</div>;
};

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

export default MyComponent;

Quay trở lại ví dụ 1, chúng ta viết lại như sau:

import PropTypes from 'prop-types';

const HeaderPropType = ({ name }: { name: string }) => {

    if (name.length > 10) {
        console.error('Invalid header');
        return <></>
    }

    return <h2>Hello, {name}!</h2>;
};

HeaderPropType.propTypes = {
    name: PropTypes.string
}

export default HeaderPropType;

Khai báo HeaderPropType trong App.tsx

<HeaderPropType name="John Doe" />

Dưới đây là các kiểu dữ liệu cơ bản mà React hỗ trợ

type	example	class
String	'hello'	PropTypes.string
Number	10, 0.1	PropTypes.number
Boolean	true / false	Protypes.bool
Function	Helen Bennett	UK
PropTypes.func	const say => (msg) => console.log("Hello world")	PropTypes.func
Symbol	Symbol("msg")	PropTypes.symbol
Object	{name: 'Abraham Lincoln'}	PropTypes.object
Anything	'whatever', 10, {}

Kiểu Array

type	example	class
Array	[]	PropTypes.array
Array of number	[1, 2, 3]	PropTypes.arrayOf([type])
Enum	['Red', 'Blue']	PropTypes.oneOf([arr])

Ví dụ:

Clock.propTypes = {
	counts: PropTypes.array,
	users: PropTypes.arrayOf(PropTypes.object),
	alarmColor: PropTypes.oneOf(['red', 'blue']),
	description: PropTypes.oneOfType([
	PropTypes.string,
	PropTypes.instanceOf(Title)
]),
}

Object types

type	example	class
Object	{name: 'Ari'}	PropTypes.object
Number object	{count: 42}	PropTypes.objectOf()
Instance	new Message()	PropTypes.objectOf()
Object shape	{name: 'Ari'}	PropTypes.shape()

Clock.propTypes = {
	basicObject: PropTypes.object,
	numbers: PropTypes.objectOf(PropTypes.numbers),
	messages: PropTypes.instanceOf(Message),
	contactList: PropTypes.shape({
		name: PropTypes.string,
		phone: PropTypes.string,
	})
}

Default Props

defaultProps trong PropTypes được sử dụng để định nghĩa giá trị mặc định cho các props của một functional component trong trường hợp nếu giá trị của props đó không được truyền vào component. Điều này giúp bạn đảm bảo rằng component của bạn sẽ hoạt động đúng cách ngay cả khi không có props cụ thể được truyền vào.

Dưới đây là cách sử dụng defaultProps trong PropTypes với một ví dụ đơn giản:

Header.propTypes = {
	title: PropTypes.string,
};
Header.defaultProps = {
	title: 'Github activity'
}

Trường hợp cho kiểu dữ liệu PropTypes.func

Header.propTypes = {
  onClick: PropTypes.func,
};

Header.defaultProps = {
  onClick: () => {
    console.log('Default click handler');
  },
};

Validator

Prop validation trong React PropTypes giúp bạn kiểm tra kiểu dữ liệu và giá trị của các props được truyền vào các component của bạn.

Ví dụ

Component.propTypes = {

  requiredAnyProp: PropTypes.any.isRequired,
  requiredFunctionProp: PropTypes.func.isRequired,
  requiredSingleElementProp: PropTypes.element.isRequired,
  requiredPersonProp: PropTypes.instanceOf(Person).isRequired,
  requiredEnumProp: PropTypes.oneOf(['Read', 'Write']).isRequired,

  requiredShapeObjectProp: PropTypes.shape({
    title: PropTypes.string.isRequired,
    date: PropTypes.instanceOf(Date).isRequired,
    isRecent: PropTypes.bool
  }).isRequired

}

Custom Validation

Hàm validation sẽ nhận vào 3 tham số

• props: Một đối tượng chứa tất cả các props được truyền cho component
• propName
• componentName

Nếu validate không thành công, function sẽ trả về một đối tượng Error. Error này không nên được throw ra ngoài. Ngoài ra, bạn không nên sử dụng console.warn bên trong chức năng xác thực tùy chỉnh

Ví dụ

const isEmail = function(props, propName, componentName) {
  const regex = /^((([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,})))?$/;

  if (!regex.test(props[propName])) {
    return new Error(`Invalid prop `${propName}` passed to `${componentName}`. Expected a valid email address.`);
  }
}

Component.propTypes = {
  email: isEmail,
  fullname: PropTypes.string,
  date: PropTypes.instanceOf(Date)
}

Ví dụ 2:

import PropTypes from 'prop-types';

function nonEmptyString(props: any, propName: string, componentName: string): Error | undefined  {
    if (typeof props[propName] !== 'string' || props[propName].trim() === '') {
        return new Error(`Invalid prop ${propName} supplied to ${componentName}. It must be a non-empty string.`);
    }
}

const HeaderPropType = ({ name, description }: { name: string, description: string }) => {

    if (name.length > 10) {
        console.error('Invalid header');
        return <></>
    }

    return <div>Hello, {name}! {description}</div>;
};

HeaderPropType.propTypes = {
    name: nonEmptyString,
    description: PropTypes.string
}

export default HeaderPropType;

Gọi Header từ App.tsx

const headerData = {
	name: "",
	description: "note"
}
return (
<Container>
	<Row>
	  <Col>
	  </Col>
	  <Col xs={6}> <div>
		<a href="https://vitejs.dev" target="_blank">
		  <img src={viteLogo} className="logo" alt="Vite logo" />
		</a>
		<a href="https://react.dev" target="_blank">
		  <img src={reactLogo} className="logo react" alt="React logo" />
		</a>
	  </div>
		<h1>Vite + React</h1>
		<div className="card">
		  <Clock />
		  <JsFileDemo />
		</div>
		<p className="read-the-docs">
		  Click on the Vite and React logos to learn more
		</p></Col>
	  <Col></Col>
	</Row>
  </Container>
)

Tham khảo

How to validate React props using PropTypes

PropTypes trong ReactJS