propsTypes和defaultProps

1,920 阅读1分钟

子组件要拿到父组件的属性,需要通过 this.props 方法。

propsTypes

类型检查时为了避免向组件中传入不必要的数据类型,从而导致一些不必要的bug

propsTypes是props的类型检验,类型如下(prop-types包):

  • propTypes.number
  • propTypes.string
  • propTypes.func
  • propTypes.bool
  • propTypes.object
  • propTypes.array
  • propTypes.symbol
  • propTypes.node (react元素)验证值为结点
  • propTypes.element (react组件)验证值为元素
  • propTypes.any (任意数据类型)
  • propTypes.oneOfType([types....]) 选择满足数组中的一种验证规则就可以
  • propTypes.isRequired (props必须传值,而且可以链式调用)

使用前需要引入

import PropTypes from 'prop-types'

使用方式

class LedgerAdmin extends Component {
    static propTypes = {
        父级属性1: PropTypes.bool,
        父级属性2: PropTypes.string
    }
}

defaultProps

defaultProps的作用是设置props的默认值,使用方法如下:

class LedgerAdmin extends Component {
   static defaultProps = {
    父级属性1: false
  }
}