Comment déclarer un PropType correspondant à un nombre nullable ?

Question

Je suis à la recherche d'un PropType c'est-à-dire

"Ceci est requis, et ce sera soit un nombre, soit nul".

En d'autres termes, ce que j'ai maintenant est

PropTypes.number.isRequired

mais cela déclenche un avertissement si un null est transmise, mais je veux que null pour être une valeur acceptable.

Answer 1

Il suffit d'utiliser :

PropTypes.number

Par défaut, tous les types de prop ne sont pas obligatoires (c'est-à-dire qu'ils autorisent null ou undefined ), à moins que vous ne lanciez un .isRequired à leur extrémité.

Vous pouvez consulter la documentation complète sur les proptypes ici :

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

Answer 2

Vous pouvez tout simplement utiliser :

PropTypes.number

et dans defaultProps :

yourPropName: null

Answer 3

Actuellement prop-types La bibliothèque ne le permet pas. Pour contourner ce problème, j'utilise une fonction de validation personnalisée.

MyComponent.propTypes = {
  nullableArray: function(props, propName, componentName) {
    const { propName: data } = props;

    if (data === undefined) {
      return new Error(`Undefined ${propName} is not allowed`);
    }

    if (data !== null) {
      return; //this is allow when data is loading
    }

    if (!_.isArray(data)) {
      return new Error(`${propName} must be an array`);
    }
  }
};

Vous pouvez faire un pas de plus en créant une fonction d'ordre élevé pour générer la fonction de validation. Ceci devrait vous aider à démarrer.

generateRequiredOrNullValidationFunction = expectedType => {
  if (expectedType !== "array") {
    return Error(`Unexpected ${expectedType}`);
  }

  return function(props, propName, componentName) {
    const { [propName]: data } = props;

    if (data === undefined) {
      return new Error(`Undefined ${propName} is not allowed`);
    }

    if (data !== null) {
      return; //this is allow when data is loading
    }

    if (expectedType === "array" && !_.isArray(data)) {
      return new Error(`${propName} must be an array`);
    }
  };
};

Dans cet extrait, expectedType est une énumération telle que bool , array , number ...

Answer 4

Pour aider à résoudre ce problème assez courant, j'ai créé un wrapper propre et entièrement typé appelé meilleurs-prop-types :

import BetterPropTypes from 'better-prop-types'

// ...

MyComponent.propTypes = {
  aProp: BetterPropTypes.string.isRequiredButNullable,
}

Answer 5

import propTypes from 'prop-types';

const nullable = propType => (props, propName, ...rest) =>
  props[propName] === null ? null : propType(props, propName, ...rest);

const testMe = {
  a: 'string',
  b: 420,
  c: null,
  d: undefined,
  e: undefined
};

const testSchema = {
  a: nullable(propTypes.string.isRequired),
  b: nullable(propTypes.string.isRequired),
  c: nullable(propTypes.number.isRequired),
  d: nullable(propTypes.bool.isRequired),
  e: nullable(propTypes.number)
};

propTypes.checkPropTypes(testSchema, testMe, 'prop', 'testMe');
// Warning: Failed prop type: Invalid prop `b` of type `number` supplied to `testMe`, expected `string`.
// Warning: Failed prop type: The prop `d` is marked as required in `testMe`, but its value is `undefined`.