Existe-t-il un meilleur moyen de valider si un nombre se trouve dans une plage ?

Éviter d'écrire

PropTypes.oneOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10) 
9
Pablo De Luca 23 mai 2018 à 16:15

4 réponses

Meilleure réponse

Selon la documentation, vous pouvez définir vos accessoires personnalisés

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

Donc pour votre cas, vous pouvez essayer ce qui suit

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
}
8
Isaac 23 mai 2018 à 13:28

Vous pouvez utiliser un validateur Prop personnalisé.

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

Veuillez consulter la documentation pour plus de détails.

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

3
Amit 23 mai 2018 à 13:25

Vous pouvez utiliser l'extension airbnb aux proptypes qui prennent en charge le range PropType

plage: fournir un min et un max, et l'hélice doit être un entier dans la plage [min, max) foo: plage (-1, 2)

0
antoniom 21 janv. 2020 à 23:13

S'il s'agit d'une séquence, vous pouvez utiliser un ES6 intelligent. :)

[BTW, je pense que la première réponse est la plus appréciée, celle-ci n'est qu'un truc ]

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

Explication: Cette partie [...(new Array(10))].map((_, i) => i + 1) donnera à la séquence.

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

// Spreading the Sequence numbers 
console.log(...[...(new Array(5))].map((_, i) => i + 1))
1
Ritwick Dey 23 mai 2018 à 13:41