React PropTypes: autorise différents types de PropTypes pour un accessoire

244

J'ai un composant qui reçoit un accessoire pour sa taille. Le prop peut être soit une chaîne ou un nombre ex: "LARGE"ou 17.

Puis-je faire savoir à React.PropTypes que cela peut être l'un ou l'autre dans la validation propTypes?

Si je ne spécifie pas le type, je reçois un avertissement: prop type `size` is invalid; it must be a function, usually from React.PropTypes.

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

Réponses:

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

En savoir plus: Vérification typographique avec PropTypes

Paweł Andruszków
la source
Merci pour cela, je reçois des erreurs aléatoires lors de l'exécution de mes tests Jest en définissant des Proptypes statiques dans mes classes: ReferenceError: oneOfType is not defined- des suggestions? Merci d'avance!!
Sara Inés Calderón
êtes-vous sûr que vous avez correctement importé import PropTypes from 'prop-types';?
Paweł Andruszków
salut Pawel - oui, c'est comme ça que nous les importons:import PropTypes from 'prop-types';
Sara Inés Calderón
1
2019 - utilisation PropTypes.oneOf
Imdad
26

À des fins de documentation, il est préférable de répertorier les valeurs de chaîne qui sont légales:

size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([ 'SMALL', 'LARGE' ]),
]),
cleong
la source
11

Cela pourrait fonctionner pour vous:

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
CorrinaB
la source
1
Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant pourquoi et / ou comment ce code répond à la question améliore sa valeur à long terme.
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
la source
16
Oui, PropTypes vit maintenant dans son propre package, mais cela ne répond pas à la question ...
Kevin Amiranoff
1
Pas du tout pertinent pour la question
jalooc