reactjs - prop-types

1、什么是prop-types，为什么使用它?

prop-types 是用来进行类型检查的库，开发过程中我们经常会遇到数据类型传错的情况，使用它进行校验能节省大量纠错时间

2、安装与引入

// 安装
npm install prop-types --save
/* yarn add prop-types */
// 引入
import PropTypes from 'prop-types';

3、可以检测的类型

optionalArray: PropTypes.array,  
optionalBool: PropTypes.bool,  
optionalFunc: PropTypes.func,  
optionalNumber: PropTypes.number,  
optionalObject: PropTypes.object,  
optionalString: PropTypes.string,  
optionalSymbol: PropTypes.symbol,

4、不同情况的使用方法

① class中

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

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

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

② funcion中

import React from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button } from 'antd';

const ProductList = ({ onDelete, products }) => {
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
  }, {
    title: 'Actions',
    render: (text, record) => {
      return (
        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  }];
  return (
    <Table
      dataSource={products}
      columns={columns}
    />
  );
};

ProductList.propTypes = {
  onDelete: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
};

export default ProductList;

③ ES7中

class Greeting extends React.Component {
  //如果没有传递该属性时的默认值
  static defaultProps = {
    name: 'stranger'
  }
  //如果传递该属性，该属性值必须为字符串
  static propTypes={
    name:PropTypes.string
  }
  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

其他

① 使用isRequired设置属性为必须传递的值

 static propTypes={
    name:PropTypes.string.isRequired
  }

② arrOf和objectOf多重嵌套类型检测

  // An array of a certain type
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
 
  // An object with property values of a certain type
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  //示例
  static propTypes = {
        todoList:PropTypes.arrayOf(PropTypes.shape({
            id:PropTypes.string.isRequired,
            text:PropTypes.string
        }))
    }

③ shape检测不同对象的不同属性的不同数据类型

  // An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  }),
  //示例
  static propTypes = {
     object:PropTypes.shape({
         name:PropTypes.string,
         age:PropTypes.number
      })
 }

引用

作者：_123hhh
链接：https://www.jianshu.com/p/a73fb26c88b5