24/01/2019, 15:23

Check kiểu trong React với PropTypes

Giới thiệu Trong React, app của bạn càng lớn, thì số bug liên quan tới việc check kiểu càng nhiều. Để giải quyết vấn đề thì bạn có thể sử dụng Flow hoặc TypeScript để check kiểu cho toàn bộ app của mình. Tuy nhiên nếu vì lý do nào đó mà bạn không muốn dùng 2 cái trên, thì React cung cấp một giải ...

Giới thiệu

Trong React, app của bạn càng lớn, thì số bug liên quan tới việc check kiểu càng nhiều. Để giải quyết vấn đề thì bạn có thể sử dụng Flow hoặc TypeScript để check kiểu cho toàn bộ app của mình. Tuy nhiên nếu vì lý do nào đó mà bạn không muốn dùng 2 cái trên, thì React cung cấp một giải pháp check kiểu khác được tích hợp sẵn đó là PropTypes.

Để sử dụng PropTypes với một Component, bạn assign thuộc tính propTypes cho Component đó như sau

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

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

PropTypes export một loạt các validator để có thể đảm bảo rằng data đầu vào là đúng. Trong ví dụ trên, chúng ta sử dụng PropTypes.string. Vì lý do về mặt hiệu năng, PropTypes chỉ nên check ở chế độ development.

Các loại PropTypes

Sau đây là vài ví dụ về các loại validator khác.

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // Bạn có thể khai báo prop là một kiểu JS nào đó.
  // Default thì những bọn này là optional
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // Bất cứ thứ gì có thể dược rende: numbers, string, element, 
  // hoặc là một array chứa những thứ trên
  optionalNode: PropTypes.node,

  // Một React element.
  optionalElement: PropTypes.element,

  // Một instance của một class
  optionalMessage: PropTypes.instanceOf(Message),

  // Có thể limit props là một trong những kiểu nào đó 
  // bằng cách coi nó như enum
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // một object mà có thể là một trong nhiều kiểu
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // Một array của một kiểu
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // Một object mà value của nó có thể là một kiểu nào đó
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // một object theo một format nào đó
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // Bạn có thể thêm isRequired phía sau bất cứ cái nào ở trên
  // để xuất hiện warning khi props bị thiếu
  requiredFunc: PropTypes.func.isRequired,

  // bất cứ kiểu nào
  requiredAny: PropTypes.any.isRequired,

  // Ngoài ra bạn cũng có thể định nghĩa một custom validator. 
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

Require Single Child

Với PropTypes.element bạn có thể chỉ định một child Component có thể được tryền vào.

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // Đây phải chính xác là một element, nếu không React sẽ hiện warning
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

Giá trị Prop Default

Bạn cũng có thể định nghĩa giá trị default của prop khi mà, prop đó không được set.

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Set giá trị default cho props:
Greeting.defaultProps = {
  name: 'Stranger'
};

// Renders "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

Bài liên quan

Check kiểu trong React với PropTypes

Giới thiệu Trong React, app của bạn càng lớn, thì số bug liên quan tới việc check kiểu càng nhiều. Để giải quyết vấn đề thì bạn có thể sử dụng Flow hoặc TypeScript để check kiểu cho toàn bộ app của mình. Tuy nhiên nếu vì lý do nào đó mà bạn không muốn dùng 2 cái trên, thì React cung cấp một giải ...

Trịnh Tiến Mạnh viết 4 tuần trước

Cùng dev và test UI trong React với Storybook

Nhìn cái hình gif nguy hiểm quá =)). OK thì hôm này mình sẽ giới thiệu với mọi người về một awesome library dùng để dev và test IU trong React, vue, Angular, ... Vâng như cái tiêu đề đó là storybook. Mình sẽ mô tả nhẹ về library này và sau đó sẽ đi vào setup nhé! 1. Mô tả về storybook ...

Trịnh Tiến Mạnh viết 16:48 ngày 15/09/2018

Quản lý form trong React với Formik và Yup (P2)

Mở đầu Ở bài viết trước của mình, chúng ta đã nói sơ qua về cách cài đặt cũng như sử dụng Formik & Yup cho React form của chúng ta. Trong bài viết này, mình sẽ giải đáp nốt việc sử dụng Formik & Yup cho những field còn lại trong form của chúng ta cũng, các chúng ta xử lý việc submit form ...

Trần Trung Dũng viết 14:18 ngày 14/09/2018

Quản lý form trong React với Formik và Yup (P1)

Yêu cầu Trước khi đọc bài viết này, bạn nên có những kiến thức cơ bản về việc sử dụng ReactJS và biết cách xử lý form với ReactJS. Nếu chưa biết thì bạn nên tìm hiểu hai vấn đề này trước ở đây Mở đầu Khi làm việc với các thư viện về front-end như ReactJS, VueJS hay AngularJS thì việc quản lý ...

Bùi Văn Nam viết 17:14 ngày 07/09/2018

Snapshot testing trong React với Jest

Snapshot tests là một công cụ rất hữu ích trong trường hợp Developer muốn đảm bảo rằng UI không bị thay đổi ngoài ý muốn. Trong react, snapshot testing là việc tạo ra 1 file snapshot dưới dạng một file serializable từ component, sau đó trong những lần test sau, các component sẽ tiếp tục tạo ra ...

Trịnh Tiến Mạnh viết 16:37 ngày 12/08/2018
0