React PropTypes: consente diversi tipi di PropTypes per un prop


244

Ho un componente che riceve un sostegno per le sue dimensioni. L'elica può essere una stringa o un numero es: "LARGE"o 17.

Posso far sapere a React.PropTypes che questo può essere l'uno o l'altro nella validazione propTypes?

Se non specifico il tipo ricevo un avviso: prop type `size` is invalid; it must be a function, usually from React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}

Risposte:


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

Ulteriori informazioni: Verifica dei tipi con PropTypes


Grazie per questo, ricevo errori casuali quando eseguo i miei test Jest impostando Proptype statici nelle mie classi: ReferenceError: oneOfType is not defined- qualche suggerimento? Grazie in anticipo!!
Sara Inés Calderón,

sei sicuro di aver importato correttamente import PropTypes from 'prop-types';?
Paweł Andruszków,

ciao Pawel - sì, è così che li importiamo:import PropTypes from 'prop-types';
Sara Inés Calderón,

1
2019 - usa PropTypes.oneOf
Imdad

26

Ai fini della documentazione, è meglio elencare i valori di stringa che sono legali:

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

11

Questo potrebbe funzionare per te:

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

1
Mentre questo codice può rispondere alla domanda, fornendo un contesto aggiuntivo riguardo al perché e / o al modo in cui questo codice risponde alla domanda migliora il suo valore a lungo termine.
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
Sì, PropTypes ora vive nel suo pacchetto, ma questo non risponde alla domanda ...
Kevin Amiranoff,

1
Completamente irrilevante per la domanda
jalooc,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.