Javascript 在react中创建扩展默认PropType的自定义PropType

我正在尝试创建一个自定义PropType，用于检查数组是否有数值，长度是否为2（并且对数字的顺序有一些限制）

显然，对于前两个约束，我可以执行

Array.PropType.arrayOf（Array.PropType.number）

我想在我的定制PropType中重用它（而不是进行我自己的数字和数组检查）

---

我该怎么做

我不知道如何扩展它们，我不确定这是否可行

但您可以将上述内容存储为导出常量，并使用它来组合其他proptype的属性（但我认为您可能已经知道这一点）：

---

React.PropTypes.arrayOf（React.PropTypes.number）

只返回一个函数，因此您可以提供自己的函数来执行验证

您的函数将被传递三个参数：

props、propName、componentName

请参阅文档中的第二个到最后一个示例

因此，应该满足约束条件的函数是：

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
},

---

尝试这样做会在React 15.3.x中引发警告：@ConAntonakos:更具体地说，在React 15中，我的答案中的第一个解决方案（重用

PropType

的

arrayOf

）出现了问题。我实际建议的解决方案（编写您自己的简单函数来检查道具）是完全有效的，仍然可以正常工作。

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
},