javascript - 在 react 中创建扩展默认 PropTypes 的自定义 PropTypes

Question

我正在尝试创建一个自定义 PropType 来检查数组是否具有数值且长度为 2(并且对数字的排序有一些限制)。

显然，我可以为前两个约束执行 Array.PropType.arrayOf(Array.PropType.number)。

我想在我的自定义 PropType 中重用它(而不是推出我自己的数字和数组检查)。

我该怎么做？

Answer 1

React.PropTypes.arrayOf( React.PropTypes.number ) 只是返回一个函数，因此您可以提供自己的函数来执行验证。

您的函数将传递三个参数:props、propName、componentName

参见 React.PropTypes 中显示的倒数第二个示例来自文档。

所以应该满足您的约束的函数是:

function isTwoElementArrayOfNumbers( props, propName, componentName ){
  var _array = props[ propName ];

  if( _array && _array.constructor === Array && _array.length === 2 ){

    if( !_array.every(
      function isNumber( element ){
        return typeof element === 'number';
      })
    ){

      return new Error('elements must be numbers!');
    }
  }
  else{
    return new Error('2 element array of numbers not provided!');
  }
}

...in your react element
propTypes:{
  numArray: isTwoElementArrayOfNumbers
},