무효 번호에 대응하는 PropType을 선언하려면 어떻게 해야 합니까?

무효 번호에 대응하는 PropType을 선언하려면 어떻게 해야 합니까?

를 찾고 있습니다.PropType즉,

"이 값은 필수이며 숫자가 되거나 null이 됩니다."

즉, 지금 제가 가지고 있는 것은

PropTypes.number.isRequired

하지만 그것은 경고입니다.null가치가 전달되지만, 나는null허용 가능한 값이어야 합니다.

사용방법:

PropTypes.number

기본적으로는 모든 소품 유형이 필요하지 않습니다(예: 허용).null 또는 undefined)을(를) 팝업하지 않는 한.isRequired끝부분에서요.

Proptypes의 전체 문서는 다음 URL에서 볼 수 있습니다.

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

다음과 같이 간단하게 할 수 있습니다.

PropTypes.number

및 defaultProps:

yourPropName: null

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

한 단계 더 나아가 검증 함수를 생성하는 상위 함수를 생성할 수 있습니다.이것으로 시작할 수 있을 것이다.

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

이 토막에서expectedType는 다음과 같은 열거형입니다.bool,array,number...

이 일반적인 문제를 해결하기 위해 better-prop-types라는 깔끔하고 완전한 타입의 래퍼를 만들었습니다.

import BetterPropTypes from 'better-prop-types'

// ...

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

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

네, 추가만 하면 됩니다.

Component.propTypes = {
  numberAttribute: PropTypes.number
}

디폴트로는 다음과 같습니다.undefinedvalue. 단, 기본값을 null 또는 임의의 숫자로 변경할 수 있습니다.

EventLeaderboardPage.defaultProps = {
  numberAttribute: null
}

언급URL : https://stackoverflow.com/questions/37842868/how-can-i-declare-a-proptype-corresponding-to-a-nullable-number