創建在react中擴展默認PropType的自定義PropType

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

Answer 2

我不知道擴展它們，我不確定是否可能。

但是你可以將上面的內容存儲為導出的常量並使用它來組成其他propTypes的屬性（但我想你可能已經知道了）：

export const CustomProp = Array.PropType.arrayOf(Array.PropType.number)

export const OtherCustomProp = contains({
 foo: React.PropTypes.string,
 bars: CustomProp
});