propTypes与defaultTypes

propTypes:

为防止父组件给子组件传递的参数不是子组件期望的参数类型而导致程序运行错误,在子组件中可以对父组件传递过来的参数进行校验,使用的就是propTypes。

使用方法:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

引入proptypes,调用组件propTypes属性对参数进行校验。PropTypes导出一系列验证器,可用于确保您收到的数据有效。在这个例子中,我们正在使用PropTypes.string(要求参数是字符串类型的)。如果为prop提供了无效值,则会在JavaScript控制台中显示警告。出于性能原因,propTypes仅在开发模式下进行检查。

验证器还有:

  1. PropTypes.array
  2. PropTypes.bool
  3. PropTypes.func
  4. PropTypes.number
  5. PropTypes.object
  6. PropTypes.symbol
  7. PropTypes.node
  8. PropTypes.element
  9. PropTypes.instanceOf(类名)
  10. PropTypes.oneOf([可选列表])
  11. PropTypes.oneOfType([PropType.string,....]):许多类型中的一种
  12. PropTypes.arrayOf([]);包含某些特定类型值的数组
  13. PropTypes.objectOf();具有特定类型的属性值的对象
  14. 链式操作表示此参数是必须的:eg:PropTypes.array.isRequired表示此参数为一个数组类型的且必须存在

 defaultProps:

defaultProps:为参数定义默认值

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

// Renders "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

为name定义默认值为字符串Stranger当父组件没有向子组件传递name属性值时name为默认值。

所以类型检查也将适用于defaultProps

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值