React PropTypes: permite diferentes tipos de PropTypes para un accesorio

244

Tengo un componente que recibe un accesorio por su tamaño. El accesorio puede ser una cadena o un número, por ejemplo: "LARGE"o 17.

¿Puedo dejar que React.PropTypes sepa que esto puede ser uno u otro en la validación de propTypes?

Si no especifico el tipo, recibo una advertencia: prop type `size` is invalid; it must be a function, usually from React.PropTypes.

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

Respuestas:

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

Más información: Verificación de tipos con PropTypes

Paweł Andruszków
fuente
Gracias por esto, obtengo errores aleatorios cuando ejecuto mis pruebas de Jest configurando Proptypes estáticos en mis clases: ReferenceError: oneOfType is not defined- ¿ Alguna sugerencia? ¡¡Gracias por adelantado!!
Sara Inés Calderón
¿estás seguro de haber importado correctamente import PropTypes from 'prop-types';?
Paweł Andruszków
Hola Pawel - sí, así es como los importamos:import PropTypes from 'prop-types';
Sara Inés Calderón
1
2019 - use PropTypes.oneOf
Imdad
26

Para fines de documentación, es mejor enumerar los valores de cadena que son legales:

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

Esto podría funcionar para usted:

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
CorrinaB
fuente
1
Si bien este código puede responder la pregunta, proporcionar un contexto adicional con respecto a por qué y / o cómo responde la pregunta mejora su valor a largo plazo.
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
Miguel
fuente
16
Sí, PropTypes vive en su propio paquete ahora, pero eso no responde la pregunta ...
Kevin Amiranoff
1
Completamente no relevante para la pregunta
jalooc