创建自定义 PropType，以扩展 react 中的默认 PropType

Creating custom PropTypes that extend default PropTypes in react

本文关键字：PropType react 默认 自定义 创建 扩展      更新时间：2023-09-26

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

显然，我可以对前两个约束做Array.PropType.arrayOf(Array.PropType.number)。

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

我该怎么做？

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

您的函数将传递三个参数：props, propName, componentName

请参阅文档中的 React.PropType 中显示的倒数第二个示例。

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

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
},
我不知道

扩展它们，我不确定这是否可能。

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

export const CustomProp = Array.PropType.arrayOf(Array.PropType.number)
export const OtherCustomProp = contains({
 foo: React.PropTypes.string,
 bars: CustomProp
});
相关文章：