React PropTypes 校验 与 DefaultProp

propTypes 类型检查
JavaScript 是一门弱类型的语言，允许变量类型做隐式转换。为了减少这种错误，你还可以使用 Flow 或 TypeScript进行检查；即使你不使用这些扩展，React 也内置了一些类型检查的功能。要在组件的 props 上进行类型检查，你只需配置特定的 propTypes 属性
注意：自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types库 https://www.npmjs.com/package/prop-types 代替。

1. 安装 PropTypes

npm install --save prop-types

2. 使用 PropTypes 已组件通信文章里的子组件为例子

import React, {Component} from 'react'
import PropTypes from 'prop-types' //导入prop-types

class TodoItem extends Component {
  constructor(props) {
    super(props)
    this.del = this.del.bind(this)
  }

  render() {
    const { content } = this.props
    return (
      <li>
        {content}
        <button onClick={this.del}>删除</button>
      </li>
    )
  }

  del() {
    const { deleteItem, index } = this.props
    deleteItem(index)
  }
}

// 对 组件（TodoItem）类型 （propType） 进行强校验
TodoItem.propTypes = {
  //里面的PropTypes 必须和你导入定义的名字一致
  content: PropTypes.string, //必须是字符串
  deleteItem: PropTypes.func, //必须是函数 function
  index: PropTypes.number, //必须是number
  //test: PropTypes.string.isRequired 假设有一个test参数需要接收类型为string； .isRequired 代表 必须传递， 如果不传递他是会报error警告的
  /* 常用类型：
   * PropTypes.array        数组：数组对象用来在单独的变量名中存储一系列的值
   * PropTypes.bool         指代真或假、是或否。这个类型只有两个值，就是 true 和 false
   * PropTypes.func         函数可用于所有内建的 JavaScript 对象
   * PropTypes.number       数字：有整型字面量、浮点型字面量、NaN、Infinity
   * PropTypes.object       对象也是变量。但是对象包含很多值。
   * PropTypes.string       由UTF-16编码的字符集组成 'abc 1'
   * PropTypes.symbol       ES6中引入的第6种基本类型 值只能通过 Symbol() 函数生成，不能使用 new 操作符，因为没有构造器。且其生成的每一个值，都是独一无二的，因而能够解决冲突问题。 Symbol('foo')
   * PropTypes.node         节点：字符串，DOM 元素或包含这些类型的数组
   * PropTypes.element      元素： 一个 React 元素
   * PropTypes.elementType  元素类型： 一个 React 元素类型（即，MyComponent）
   * PropTypes.instanceOf(Message)        用 JS 的 instanceof 操作符声明 prop 为类的实例
   * PropTypes.oneOf(['News', 'Photos'])  枚举类型：你可以让你的 prop 只能是特定的值，指定它为
   * PropTypes.arrayOf(PropTypes.number, PropTypes.string)   或者：值为number或者string
   * */
}

export default TodoItem

DefaultProps 可以通过配置特定的 defaultProps 属性来定义 props 的默认值

使用defaultProps 已组件通信文章里的字组件为例子

import React, {Component} from 'react'
import PropTypes from 'prop-types' //导入prop-types

class TodoItem extends Component {
  constructor(props) {
    super(props)
    this.del = this.del.bind(this)
  }

  render() {
    const { test } = this.props
    const { content } = this.props
    return (
      <li>
        {test} - {content}
        <button onClick={this.del}>删除</button>
      </li>
    )
  }

  del() {
    const { deleteItem, index } = this.props
    deleteItem(index)
  }
}

// 对 组件（TodoItem）类型 （propType） 进行强校验
TodoItem.propTypes = {
  test: PropTypes.string.isRequired //必须传递
}

// 对 组件（TodoItem）类型 （propType） 添加默认值
TodoItem.defaultProps = {
  /* 上方校验 test 必须传递
   * 当它让在未填写的时候给它一个默认值就可以设置默认值
   */
  test: 'hello world'
}

export default TodoItem