React笔记 （四）Props限制PropTypes和defaultProps的使用

在子组件接受父组件传递的值的时候，React支持子组件对来的数据做限制以及添加默认值。 分别用到React的PropTypes和defaultProps

PropTypes

在一个组件接收prop的时候做的限制，可以限制传过来的值的类型和是否为空等

import PropTypes from 'prop-types'; //首先引入 PropTypes
TodoItem.propTypes = {
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  test: PropTypes.string.isRequired,//isRequired可强制不为空
  optionalUnion: PropTypes.oneOfType([//也可以为满足其中之一就算过
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
}

属性默认值 defaultProps

非常简单可以给传过来的props传默认值，如果props没有传则显示默认值

static defaultProps = {
    name: '蔡徐坤',
    label： 'nm$l❤'
}

详情请结合官网