React PropTypes: 数字范围

Question

有没有更好的方法来验证一个数字是否在一定范围之内？避免编写下面这种代码。

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

- Pablo De Luca

Answer 1

根据文档，您可以定义自定义属性（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
}

- Isaac

---

你也可以提供一个柯里化函数，它将接受一个范围作为参数，以便在函数定义中避免硬编码参数。 - Cédric Hartland

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

- Amit

Answer 3

如果这是一个序列，你可以使用一个智能的ES6。 :)

[顺便说一句，我认为第一个答案是最好的，这个只是一个技巧]

PropTypes.oneOf([...(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))

- Ritwick Dey

Answer 4

你可以使用airbnb的PropTypes扩展，它支持range PropType。

范围：提供最小值和最大值，prop 必须是在[min，max)范围内的整数 foo: range(-1, 2)

- antoniom

Answer 5

假设您想要传入并验证年龄在age <= 18 && age >= 60之间。

下面的代码将传递范围内的值，否则不会返回任何内容。我希望这可以帮助您和新手很多。

在您的函数组件App中，

import React from 'react'
import PropTypes from 'prop-types'

const App= (props) => {
  return (
    <div>
      <h1>I am in the App Component!</h1>
      <p>Age : {props.age >= 18 && props.age <= 60 ? props.age : false}</p>
    </div>
  )
}
App.propTypes = {
 age : PropTypes.number
}

export default App;

- Satyabrata Sahoo