Question

如果数字在某个范围内，是否有更好的方法来验证？

避免写

PropTypes.oneOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

Answer 1

根据documentation，您可以定义customProps

customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  }

因此，对于您的情况，您可以尝试以下

function withinTen(props, propName, componentName) {
  componentName = comopnentName || 'ANONYMOUS';

  if (props[propName]) {
    let value = props[propName];
    if (typeof value === 'number') {
        return (value >= 1 && value <= 10) ? null : new Error(propName + ' in ' + componentName + " is not within 1 to 10");
    }
  }

  // assume all ok
  return null;
}


something.propTypes = {
  number: withinTen,
  content: React.PropTypes.node.isRequired
}

Answer 2

您可以使用自定义支持验证程序。

completed: function(props, propName, componentName) {
    if (props[propName]>=1 &&  props[propName]<=10) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  }

请参阅文档以获取更多详细信息。

https://reactjs.org/docs/typechecking-with-proptypes.html

Answer 3

您可以使用airbnb's extension to proptypes来支持range PropType

范围：提供最小值和最大值，并且prop必须是[min，max）范围内的整数 foo：range（-1，2）

Answer 4

如果是序列，您可以使用智能ES6。 :)

[顺便说一下，我相信第一个答案是最欣赏的，这个只是技巧]

PropTypes.oneOf(...[...(new Array(10))].map((_, i) => i + 1))

<强>说明：这个[...(new Array(10))].map((_, i) => i + 1)部分将给出序列。

// Sequence
console.log([...(new Array(5))].map((_, i) => i + 1))

// Spreading the Sequence numbers 
console.log(...[...(new Array(5))].map((_, i) => i + 1))

React PropTypes：数字范围

4 个答案: