zoukankan      html  css  js  c++  java
  • React的类型检测PropTypes

    React.propTypes:React.PropTypes 提供很多验证器来验证传入数据的有效性,当向props传入无效数据时,JavaScript 控制台会抛出警告。

    var data = 123;
    class MyTitle extends React.Component {
       static propTypes = {
          title: PropTypes.string.isRequired,
       }
       render() {
          return <h1> {this.props.title} </h1>;
       }
    }
    ReactDOM.render(
       <MyTitle title={data} />,
       document.getElementById('example')
    );

    React.PropTypes

    其中提供了不同的验证函数:

    MyComponent.propTypes = {
      // 你可以定义一个js原始类型的prop,默认请情况下,这是都是可选的
      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,
    
      // 任何可以渲染的东西:数字,字符串,元素或数组(或片段)。
      optionalNode: React.PropTypes.node,
    
      // React元素
      optionalElement: React.PropTypes.element,
    
      // 你也可以声明prop是某个类的实例。 内部使用的是JS的instanceof运算符。
      optionalMessage: React.PropTypes.instanceOf(Message),
    
      // 你可以通过将它作为枚举来确保你的prop被限制到特定的值。
      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
      }),
    
      // 你可以用`isRequired`来连接到上面的任何一个类型,以确保如果没有提供props的话会显示一个警告。
      requiredFunc: React.PropTypes.func.isRequired,
    
      // 任何数据类型
      requiredAny: React.PropTypes.any.isRequired,
    
      // 您还可以指定自定义类型检查器。 如果检查失败,它应该返回一个Error对象。 不要`console.warn`或throw,因为这不会在`oneOfType`内工作。
      customProp: function(props, propName, componentName) {
        if (!/matchme/.test(props[propName])) {
          return new Error(
            'Invalid prop `' + propName + '` supplied to' +
            ' `' + componentName + '`. Validation failed.'
          );
        }
      },
    
      // 您还可以为`arrayOf`和`objectOf`提供自定义类型检查器。 如果检查失败,它应该返回一个Error对象。 
      // 检查器将为数组或对象中的每个键调用验证函数。 
      // 检查器有两个参数,第一个参数是数组或对象本身,第二个是当前项的键。
      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.'
          );
        }
      })
    };

    注意为了性能考虑,只在开发环境验证 propTypes。

  • 相关阅读:
    [Vue + TS] Using Route events inside Vue
    [Vue + TS] Write a Vue Component as a Class in TypeScript
    [Mobx] Use MobX actions to change and guard state
    [TypeScript] Type check JavaScript files using JSDoc and Typescript 2.5
    一年四个P(Project)
    android之IntentFilter的用法_Intent.ACTION_TIME_TICK在manifest.xml不起作用
    (step7.2.3)hdu 2554(N对数的排列问题——简单数论)
    hdu 1528 Card Game Cheater ( 二分图匹配 )
    SilkTest天龙八部系列5-类的属性
    SilkTest天龙八部系列6-用open agent进行测试
  • 原文地址:https://www.cnblogs.com/tuspring/p/10455600.html
Copyright © 2011-2022 走看看