Question

completed: React.PropTypes.number,

我可以在React组件中指定数字props的最小值和最大值。

期待如下：

completed: React.PropTypes.numberBetween(min, max),

我生成一个数组来指定范围

尝试：

completed: React.PropTypes.oneOf(Array.from({length: max -min+1, (v, k) => k + min})),

但是，我希望completed道具也接受浮动，而现在它只接受整数。

如何组合以下约束：

prop是数字（整数，浮点数，双数，......任意数字）
介于MIN和MAX之间

Answer 1

您可以使用自定义验证。

completed: function(props, propName, componentName) {
   if(props[propName] < MIN || props[propName] > MAX) {
      return new Error('Invalid');
   }
}

Answer 2

通过写Custom Props Validator，你可以做到这一点。试试这个：

num: function(props, propName, componentName) {
    if(typeof props[propName] != 'number'){
      return new Error ('Invalid type of `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.');
    }else if (props[propName] < MIN || props[propName] > MAX) {
      return new Error('Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.');
    }
},

Answer 3

CustomProp就像Docs所说：

completed: (props, propName, componentName) => 
             (props[propName] < MIN || props[propName] > MAX) && new Error('Invalid');

Answer 4

我知道这是一篇过时的文章，但是我想在遇到这个问题时也可以分享。所有其他答案都说明了如何针对单个道具使用此功能，但是如果您需要多个道具使用此功能，则创建可重用的PropType可能是一个更好的解决方案。

// Allow min/max values to be passed to PropType validator
export default const numberBetween = (min, max) => {
    // Return CustomProp to be executed
    return (props, propName, componentName) => {
        const prop = props[propName];
        if(typeof prop !== 'number' || prop < min || prop > max) {
            return new Error(`Prop ${propName} must be a number between ${min} and ${max} on ${componentName}`);
        }
    }
}

然后像这样使用它：

completed: numberBetween(1, 10)

希望这对某人有帮助！

React.PropTypes.number以最小值和最大值浮点数

4 个答案: