Wie kann ich erklären, ein PropType entsprechend eine null-Nummer?

Ich bin auf der Suche nach einem PropType das bedeutet, dass

"dies ist erforderlich, und es wird entweder eine Zahl oder null sein"

In anderen Worten, was ich jetzt haben, ist 

PropTypes.number.isRequired

aber das wirft eine Warnung, wenn ein null Wert übergeben bekommt, doch ich will null zu sein, ein akzeptabler Wert.

  • Könnten Sie klarstellen, dass Sie wollen, eine Warnung ausgegeben, wenn der prop ist bestanden undefined aber feine mit null (d.h., zu erkennen, ein Tippfehler)?
  • Das scheint das neueste auf diesem, da habe ich es. github.com/facebook/prop-types/pull/90
InformationsquelleAutor Ms. Corlib | 2016-06-15
  1. 21

    Verwenden Sie einfach:

    PropTypes.number

    Standardmäßig alle prop-Typen sind nicht erforderlich (D. H. zulassen null oder undefined), es sei denn, Sie pop eine .isRequired auf das Ende von Ihnen.

    Sehen Sie die volle Dokumentation für proptypes hier:

    • Aber das erlaubt undefined zu, die es ermöglicht zu vergessen, um die requisite!
    • Gut zu wissen, aber wahrscheinlich erfüllt der OP die Anforderungen noch.
    • github.com/facebook/react/issues/2166
    InformationsquelleAutor ctrlplusb
  2. 6

    Können Sie einfach verwenden:

    PropTypes.number

    und in defaultProps:

    yourPropName: null

    InformationsquelleAutor Eduard Fedoruk
  3. 5

    Derzeit prop-types Bibliothek nicht zulassen. Die Art, wie ich dies zu umgehen ist die Verwendung einer benutzerdefinierten validierungsfunktion

    JS:

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

    Können Sie machen einen weiteren Schritt zum erstellen eines high-order Funktion zum generieren der Validierung Funktion. dies sollte Ihnen den Einstieg

    JS:

    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 diesem snippet expectedType ist eine Aufzählung wie bool , array, number ...

    InformationsquelleAutor Lu Tran
  4. 0
    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`.
    InformationsquelleAutor Adam
Schreibe einen Kommentar