属性默认值

通过一个静态属性 defaultProps 告知React组件的属性默认值
如果父组件也传递了props,则会先进行混合,然后再传递进去

属性类型检查

使用库: prop-types
对组件使用静态属性: propTypes 告知React如何检查属性
可以用console.dir(PropTypes.number);看的出来它(这一类的都)是个函数

  1. import PropTypes from 'prop-types';
  2. MyComponent.propTypes = {
  3. // 你可以将属性声明为 JS 原生类型,默认情况下
  4. // 这些属性都是可选的。
  5. optionalArray: PropTypes.array,
  6. optionalBool: PropTypes.bool,
  7. optionalFunc: PropTypes.func,
  8. optionalNumber: PropTypes.number,
  9. optionalObject: PropTypes.object,
  10. optionalString: PropTypes.string,
  11. optionalSymbol: PropTypes.symbol,
  12. // 任何可被渲染的元素(包括数字、字符串、元素或数组)
  13. // (或 Fragment) 也包含这些类型。
  14. optionalNode: PropTypes.node,
  15. // 一个 React 元素。
  16. optionalElement: PropTypes.element,
  17. // 一个 React 元素类型(即,MyComponent)。
  18. // 使用的时候需要先保存下来:const Mycomponent = this.props.MyComponent
  19. // 然后才能直接使用:<MyComponent / >
  20. optionalElementType: PropTypes.elementType,
  21. // 你也可以声明 prop 为类的实例,这里使用
  22. // JS 的 instanceof 操作符。
  23. optionalMessage: PropTypes.instanceOf(Message),
  24. // 你可以让你的 prop 只能是特定的值,指定它为
  25. // 枚举类型。
  26. optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  27. // 一个对象可以是几种类型中的任意一个类型
  28. optionalUnion: PropTypes.oneOfType([
  29. PropTypes.string,
  30. PropTypes.number,
  31. PropTypes.instanceOf(Message)
  32. ]),
  33. // 可以指定一个数组由某一类型的元素组成
  34. optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  35. // 可以指定一个对象由某一类型的值组成
  36. optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  37. // 可以指定一个对象由特定的类型值组成
  38. optionalObjectWithShape: PropTypes.shape({
  39. color: PropTypes.string,
  40. fontSize: PropTypes.number
  41. }),
  42. // An object with warnings on extra properties
  43. optionalObjectWithStrictShape: PropTypes.exact({
  44. name: PropTypes.string,
  45. quantity: PropTypes.number
  46. }),
  47. // 你可以在任何 PropTypes 属性后面加上 `isRequired` ,确保
  48. // 这个 prop 没有被提供时,会打印警告信息。
  49. requiredFunc: PropTypes.func.isRequired,
  50. // 任意类型的必需数据
  51. requiredAny: PropTypes.any.isRequired,
  52. // 你可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。
  53. // 请不要使用 `console.warn` 或抛出异常,因为这在 `oneOfType` 中不会起作用。
  54. customProp: function(props, propName, componentName) {
  55. if (!/matchme/.test(props[propName])) {
  56. return new Error(
  57. 'Invalid prop `' + propName + '` supplied to' +
  58. ' `' + componentName + '`. Validation failed.'
  59. );
  60. }
  61. },
  62. // 你也可以提供一个自定义的 `arrayOf` 或 `objectOf` 验证器。
  63. // 它应该在验证失败时返回一个 Error 对象。
  64. // 验证器将验证数组或对象中的每个值。验证器的前两个参数
  65. // 第一个是数组或对象本身
  66. // 第二个是他们当前的键。
  67. customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
  68. if (!/matchme/.test(propValue[key])) {
  69. return new Error(
  70. 'Invalid prop `' + propFullName + '` supplied to' +
  71. ' `' + componentName + '`. Validation failed.'
  72. );
  73. }
  74. })
  75. };