web-dev-qa-db-fra.com

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

Je cherche un PropType qui signifie

"cela est nécessaire, et ce sera soit un nombre, soit nul"

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

PropTypes.number.isRequired

mais cela envoie un avertissement si une valeur null est transmise, mais je veux que null soit une valeur acceptable.

javascriptreactjsreact-native
42
Ms. Corlib

Il suffit d'utiliser:

PropTypes.number

Par défaut, tous les types d'accessoires ne sont pas obligatoires (autoriser null ou undefined) à moins que vous ne fassiez apparaître un .isRequired au bout d'eux.

Vous pouvez voir la documentation complète des types de propriétés ici:

21
ctrlplusb

Vous pouvez simplement utiliser:

PropTypes.number

et dans defaultProps:

yourPropName: null

6
Eduard Fedoruk

Actuellement prop-types La bibliothèque ne permet pas cela. La façon dont je me débrouille 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 pour créer une fonction d'ordre élevé pour générer la fonction de validation. cela 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 ...

5
Lu Tran
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`.
0
Adam