Day26-React PropTypes & DefaultProps

在 React 中有内建的方法可以去定义传入元件的 props 资料型别，这样可以更清楚的了解传入的各 props 的型别是什麽。

此外如果传入的 props 型别和已经写好的 propTypes 定义的型别不同的话，也会自动检查并跳出错误讯息，避免一些意外的错误。

安装

要使用 PropTypes 的话，需先安装 prop-types

npm install --save prop-types

然後在会用到 prop-types 的档案引入即可。

import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

PropTypes 语法

语法相当简单易懂，就是 JS 物件的写法。

以下举例，ComponentName 的部分替换成元件的名称，每个 key 代表 component 定义的 prop 的名称，每个 key 的 value 则定义 component prop 的型别

import PropTypes from 'prop-types';

ComponentName.propTypes = {
  propName: PropTypes.array,
  // ...
}

以下列举许多判断 props 的 JS 型别，我们也可以在型别後面加上 required，表示一定要有这个 prop

ComponentName.propTypes = {
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  // 加上 isRequired
  optionalArray: PropTypes.array.isRequired,
}

PropTypes.node 用来检查 prop 是否是可以被 React render 的型别，包括以下几种:

React elements
Fragment
numbers
strings
array

ComponentName.propTypes = {
  optionalNode: PropTypes.node,
}

检查 prop 是否为 React element:

ComponentName.propTypes = {
  optionalElement: PropTypes.element,
}

检查 prop 是否是元件的名字:

ComponentName.propTypes = {
  optionalElementType: PropTypes.elementType,
}

检查 prop 是否为某个 class 的 instance:

ComponentName.propTypes = {
  optionalMessage: PropTypes.instanceOf(Message),
}

PropTypes.oneOf() 用来检查 prop 是否为阵列内指定的值之一:

ComponentName.propTypes = {
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
}

用来检查 prop 是否为阵列内指定的型别之一:

ComponentName.propTypes = {
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
}

用来检查 prop 是否为指定型别组成的阵列，以下范例可以检查是不是由数字组成的阵列:

ComponentName.propTypes = {
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
}

用来检查 prop 是否为指定型别组成的物件:

ComponentName.propTypes = {
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
}

用来检查 prop 是否为指定 key 组成的物件:

ComponentName.propTypes = {
  optionalObjectWithShape: PropTypes.shape({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  }),
}

用来检查 prop 是否为指定 key 组成的物件，且此物件不可以有额外的 key。如果有额外的 key，React 就会显示警告:

ComponentName.propTypes = {
  optionalObjectWithStrictShape: PropTypes.exact({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  }),
}

代表一个 prop 可以是任意的内容:

ComponentName.propTypes = {
  requiredAny: PropTypes.any.isRequired,
}

Component 的 children 也可以被检查，以下为范例:

ComponentName.propTypes = {
  children: PropTypes.number
}

DefaultProps

如果 props 里面没有传 propTypes 设定的检查值的时候，就会将 DefaultProps 的值当作 props 的预设值。

使用范例如下:

function ComponentName(props) {
  return <div>{props.name}</div>
}

ComponentName.propTypes = {
  name: PropTypes.string,
}

ComponentName.defaultProps = {
  name: 'Harry',
}