PropTypes reagieren: Erlaube verschiedene Arten von PropTypes für eine Requisite

244

Ich habe eine Komponente, die eine Requisite für ihre Größe erhält. Die Requisite kann entweder eine Zeichenfolge oder eine Zahl sein, z. B.: "LARGE"Oder 17.

Kann ich React.PropTypes wissen lassen, dass dies bei der propTypes-Validierung entweder der eine oder der andere sein kann?

Wenn ich den Typ nicht spezifiziere, erhalte ich eine Warnung: prop type `size` is invalid; it must be a function, usually from React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}
Kevin Amiranoff
quelle

Antworten:

572
size: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

Weitere Informationen : Typprüfung mit PropTypes

Paweł Andruszków
quelle
Vielen Dank dafür, ich erhalte zufällige Fehler, wenn ich meine Scherztests durchführe und statische Proptypen in meinen Klassen einstelle: ReferenceError: oneOfType is not defined- Irgendwelche Vorschläge? Danke im Voraus!!
Sara Inés Calderón
Bist du sicher, dass du richtig importiert hast import PropTypes from 'prop-types';?
Paweł Andruszków
Hey, Pawel - ja, so importieren wir sie:import PropTypes from 'prop-types';
Sara Inés Calderón
1
2019 - Verwenden Sie PropTypes.oneOf
Imdad
26

Zu Dokumentationszwecken ist es besser, die zulässigen Zeichenfolgenwerte aufzulisten:

size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([ 'SMALL', 'LARGE' ]),
]),
Cleong
quelle
11

Dies könnte für Sie funktionieren:

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
CorrinaB
quelle
1
Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
Rollstuhlfahrer
-4
import React from 'react';              <--as normal
import PropTypes from 'prop-types';     <--add this as a second line

    App.propTypes = {
        monkey: PropTypes.string,           <--omit "React."
        cat: PropTypes.number.isRequired    <--omit "React."
    };

    Wrong:  React.PropTypes.string
    Right:  PropTypes.string
Michael
quelle
16
Ja, PropTypes lebt jetzt in einem eigenen Paket, aber das beantwortet die Frage nicht ...
Kevin Amiranoff
1
Völlig nicht relevant für die Frage
Jalooc