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.