如何声明对应于可为空数字的 PropType？

Question

I'm looking for a PropType that means

"this is required, and it will either be a number or be null"

In other words, what I have now is

PropTypes.number.isRequired

but that throws a warning if a null value gets passed in, yet I want null to be an acceptable value.

Answer 1

Just use:

PropTypes.number

By default all prop types aren't required (ie allow null or undefined ) unless you pop a .isRequired on the end of them.

You can see the full docs for proptypes here:

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

Answer 2

You simply could use:

PropTypes.number

and in defaultProps:

yourPropName: null

Answer 3

Currently prop-types library don't allow this. The way i get around this is using a custom validation function

 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`); } } };

You can make another step further to create a high order function to generate the validation function. this should get you started

 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`); } }; };

In this snippet, expectedType is a enumeration such as bool , array , number ...

Answer 4

To help with this quite common issue, I created a clean and fully-typed wrapper called better-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`.