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
}

Réponses:


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

En savoir plus: Vérification typographique avec PropTypes


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' ]),
]),

11

Cela pourrait fonctionner pour vous:

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

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

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.