React学习之进阶类型检查(十二)

前端之家收集整理的这篇文章主要介绍了React学习之进阶类型检查(十二)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.PropTypes类型检测

React提供有一套类型检测的自己,通过React.PropTypes来进行控制

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

React.PropTypes提供了一系列的检验器用来确保你的数据的合法性,比如说样例中的React.PropTypes.string,如果提供了不合法的数据,在javascriptconsole中会出现警告,由于性能原因,propTypes的使用一般是在测试阶段,不用在用户发布阶段。

以下是React.PropTypes的一些检验器的例子

MyComponent.propTypes = {
  //这些检验器可以检验javascript的基本数据类型
  optionalArray: React.PropTypes.array,optionalBool: React.PropTypes.bool,optionalFunc: React.PropTypes.func,optionalNumber: React.PropTypes.number,optionalObject: React.PropTypes.object,optionalString: React.PropTypes.string,optionalSymbol: React.PropTypes.symbol,//任何可以被放在视图中的元素(true和DOM元素不允许)
  optionalNode: React.PropTypes.node,//为JSX对象
  optionalElement: React.PropTypes.element,// 用于限制只能输入特定的类的实例,这里就是只能是Message类的实例
  optionalMessage: React.PropTypes.instanceOf(Message),// 用于限定数据必须是枚举的数据中的一个
  optionalEnum: React.PropTypes.oneOf(['News','Photos']),// 用于限定数据必须是枚举的数据中的一个(对象)
  optionalUnion: React.PropTypes.oneOfType([
    React.PropTypes.string,React.PropTypes.number,React.PropTypes.instanceOf(Message)
  ]),//用于限定该数组为某一种类型的数组
  optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),//用于限定该对象的属性必须为某一个种类型
  optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),// 用于限定某一个对象某些属性应该为某些类型
  optionalObjectWithShape: React.PropTypes.shape({
    color: React.PropTypes.string,fontSize: React.PropTypes.number
  }),// 用于限定这个属性必须存在,并且还必须是一个函数
  requiredFunc: React.PropTypes.func.isrequired,// 用于限定这个属性必须存在,可以为任何值
  requiredAny: React.PropTypes.any.isrequired,// 用于限定这个属性必须存在,可以为xxx值
  requiredAny: React.PropTypes.xxx.isrequired,//如果你想自定义检验器,如下(这是针对一个基本数据类型的属性的)
  //propName是属性的名字,componentName是组件名,这个东西React会自动处理传入
  customProp: function(props,propName,componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation Failed.'
      );
    }
  },// 如果你想自定义检验器,如下(这是针对一个数组和对象)
  //propValue是props.name的值
  //key是数组的索引
  //componentName是组件名称
  //location是本地的props对象
  //propFullName是属性的全称比如name[key].
  customArrayProp: React.PropTypes.arrayOf(function(propValue,key,componentName,location,propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation Failed.'
      );
    }
  })
};

2.defaultProps默认属性值设置

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello,{this.props.name}</h1>
    );
  }
}
//默认属性值设置
Greeting.defaultProps = {
  name: 'Stranger'
};
//没有进行name设置,会自动进行默认属性设置
ReactDOM.render(
  <Greeting />,document.getElementById('example')
);

这个默认属性的设置非常有意思,可以一定程度上减少代码复杂度

下一篇将讲Reactref属性的必要性

猜你在找的React相关文章