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

How can I declare a PropType corresponding to a nullable number?

提问by Ms. Corlib

I'm looking for a PropTypethat means

我正在寻找一个PropType意味着

"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 nullvalue gets passed in, yet I want nullto be an acceptable value.

但是如果null传入一个值，则会发出警告，但我想null成为一个可接受的值。

回答by ctrlplusb

Just use:

只需使用：

PropTypes.number

By default all prop types aren't required (i.e. allow nullorundefined) unless you pop a .isRequiredon the end of them.

默认情况下，所有 prop 类型都不是必需的（即 allownull或undefined），除非您.isRequired在它们的末尾弹出 a 。

You can see the full docs for proptypes here:

您可以在此处查看 proptypes 的完整文档：

• https://facebook.github.io/react/docs/reusable-components.html

• https://facebook.github.io/react/docs/reusable-components.html

回答by Eduard Fedoruk

You simply could use:

你可以简单地使用：

PropTypes.number

PropTypes.number

and in defaultProps:

在 defaultProps 中：

yourPropName: null

yourPropName: null

回答by Lu Tran

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

目前prop-types图书馆不允许这样做。我解决这个问题的方法是使用自定义验证功能

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, expectedTypeis a enumeration such as bool, array, number...

在这个片段中，expectedType是一个枚举，例如bool, array, number...

回答by Adam

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`.