Tìm hiểu Props Validation trong ReactJS

import React from "react";

class App extends React.Component {
  render() {
    const {number1, number2} = this.props
    return (
      <div>
        <h1>{number1} + {number2} = {number1 + number2}</h1>
      </div>
    );
  }
}
//Chỉ định props mặc định.
//Ở đây mình cho props number1, number2 là kiểu int
App.defaultProps = {
  number1: 4,
  number2: 2
}
export default App;

import React from "react";

class App extends React.Component {
  render() {
    const {number1, number2} = this.props
    return (
      <div>
        <h1>{number1} + {number2} = {number1 + number2}</h1>
      </div>
    );
  }
}
// Chỉ định props mặc định.
// Ở đây mình chỉ định props number1, number 2 là kiểu string.
App.defaultProps = {
  number1: '4',
  number2: '2'
}
export default App;

/**
 * FUNCTIONAL COMPONENTS
 */
function ReactComponent(props) {
  // ...render ()...
}

ReactComponent.propTypes = {
  // ...chúng ta sẽ viết props type ở đây
}


/**
 * CLASS COMPONENTS: METHOD 1
 */
class ReactComponent extends React.Component {
  // ...render()...
}

ReactComponent.propTypes = {
  // ...chúng ta sẽ viết props type ở đây
}


/**
 * CLASS COMPONENTS: METHOD 2
 * Sử dụng class statics...
 */
class ReactComponent extends React.Component {
  // ...component class body here
  
  static propTypes = {
     // ...chúng ta sẽ viết props type ở đây
  }
}

App.propTypes = {
  number1: React.PropTypes.number,
  number2: React.PropTypes.number
}

npm i prop-types

import PropTypes from 'prop-types';

import PropTypes from "prop-types";

MyComponent.propTypes = {
  // Kiểu dữ liệu
  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ể render như : numbers, strings, elements hoặc array
  optionalNode: PropTypes.node,

  //  React Element
  optionalElement: PropTypes.element,

  // React Element Type
  optionalElementType: PropTypes.elementType,

  // Instanace
  optionalMessage: PropTypes.instanceOf(Message),

  // Gía trị của props bao gồm
  optionalEnum: PropTypes.oneOf(["News", "Photos"]),

  // Một object có thể bao gồm nhiều kiểu
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // Một mảng chứa giá trị là các kiểu
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // Một object có thuộc tính là kiểu
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // Một object mà mỗi phần có kiểu dữ liệu riêng
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // Một object có cảnh báo về các thuộc tính bổ sung
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),

  // Bạn có thể xâu chuỗi bất kỳ câu hỏi nào ở trên với `isRequired` để đảm bảo cảnh báo
  // được hiển thị nếu prop không được cung cấp.
  requiredFunc: PropTypes.func.isRequired,

  // Bất kì kiểu dữ liệu nào nhưng nó phải tồn tại..
  requiredAny: PropTypes.any.isRequired,

  //Chỉ định props validation tùy chỉnh
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        "Invalid prop `" +
          propName +
          "` supplied to" +
          " `" +
          componentName +
          "`. Validation failed."
      );
    }
  },

  // Bạn cũng có thể cung cấp trình xác nhận tùy chỉnh cho `ArrayOf` và` objectOf`.
  // Nó sẽ trả về một đối tượng Error nếu xác nhận thất bại. Trình xác nhận
  // sẽ được gọi cho mỗi khóa trong mảng hoặc đối tượng. Hai cái đầu tiên
  // đối số của trình xác nhận là chính mảng hoặc đối tượng và
  // khóa hiện tại của mục.
  customArrayProp: PropTypes.arrayOf(function(
    propValue,
    key,
    componentName,
    location,
    propFullName
  ) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        "Invalid prop `" +
          propFullName +
          "` supplied to" +
          " `" +
          componentName +
          "`. Validation failed."
      );
    }
  })
};

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

class App extends React.Component {
  render() {
    const {number1, number2} = this.props
    return (
      <div>
        <h1>{number1} + {number2} = {number1 + number2}</h1>
      </div>
    );
  }
}
App.defaultProps = {
  number1: 4,
  number2: 2
}
//Kiểm tra dữ liệu sử dụng PropTypes.
App.propTypes = {
  number1: PropTypes.number,
  number2: PropTypes.number
}
export default App;

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

class App extends React.Component {
  render() {
    
    return (
      <div>
        <h1>{this.props.name}</h1>
        <ul>
          <li>{this.props.type}</li>
          <li>{this.props.public_year}</li>
          <li>{this.props.storage}</li>
        </ul>
      </div>
    );
  }
}
 // Đúng kiểu dữ liệu
App.defaultProps = {
  name: 'iPhone Xs Max',
  type: 'iPhone',
  public_year: 2018,
  storage: '64 GB'
}

 // Đúng kiểu dữ liệu
App.defaultProps = {
  name: 'iPad Mini 2019',
  type: 'iPad',
  public_year: 2019,
  storage: 64
}



// Sai kiểu dữ liệu vì type phải là các giá
// trị như iPhone, Ipad, Mac, SmartWatch
App.defaultProps = {
  name: 'Airpods 2',
  type: 'Airpod',
  public_year: 2019
}

//Chỉ định validation props
App.propTypes = {
  name: PropTypes.string,
  type: PropTypes.oneOf(["iPhone", "iPad", "Mac", "SmartWatch"]),
  public_year: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ])
}
export default App;