completed: React.PropTypes.number, ¿Puedo especificar un mínimo y un máximo para un número de props en el componente React?
esperaba algo como lo siguiente:
completed: React.PropTypes.numberBetween(min, max),Genero una matriz para especificar el rango.
intento:
completed: React.PropTypes.oneOf(Array.from({length: max -min+1, (v, k) => k + min})), Sin embargo, quiero que los accesorios completed también acepten flotantes, mientras que ahora solo acepta números enteros.
Cómo combinar las siguientes restricciones:
prop es un número (entero, flotante, doble,...cualquier número)
entre MIN y MAX
Puede utilizar la validación personalizada.
completed: function(props, propName, componentName) { if(props[propName] < MIN || props[propName] > MAX) { return new Error('Invalid'); } }Al escribir un Custom Props Validator , puede lograr esto. prueba esto:
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.'); } },Sé que esta es una publicación anterior, pero pensé en compartirla ya que también me encontré con este problema. Todas las demás respuestas abordan cómo usar esta funcionalidad para un solo accesorio, pero si necesita esto para múltiples accesorios, entonces crear un PropType reutilizable podría ser una mejor solución.
// 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}`); } } }Entonces se usa así:
completed: numberBetween(1, 10)¡Espero que esto ayude a alguien!