React PropTypes: permita diferentes tipos de PropTypes para um prop


244

Eu tenho um componente que recebe um suporte para seu tamanho. O suporte pode ser uma sequência ou um número ex: "LARGE"ou 17.

Posso informar ao React.PropTypes que esse pode ser um ou outro na validação de propTypes?

Se eu não especificar o tipo, recebo um aviso: prop type `size` is invalid; it must be a function, usually from React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}

Respostas:


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

Saiba mais: digitando com PropTypes


Obrigado por isso, estou recebendo erros aleatórios ao executar meus testes Jest definindo Proptypes estáticos nas minhas classes: ReferenceError: oneOfType is not defined- alguma sugestão? Desde já, obrigado!!
Sara Inés Calderón

tem certeza de que foi importado corretamente import PropTypes from 'prop-types';?
Paweł Andruszków

Olá Pawel - sim, é assim que os importamos:import PropTypes from 'prop-types';
Sara Inés Calderón

1
Você está em
Home

26

Para fins de documentação, é melhor listar os valores de sequência legais:

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

11

Isso pode funcionar para você:

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

1
Embora esse código possa responder à pergunta, fornecer um contexto adicional a respeito de por que e / ou como esse código responde à pergunta melhora seu valor a longo prazo.
precisa saber é o seguinte

-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
Sim, PropTypes vida em seu próprio pacote agora, mas isso não responde a pergunta ...
Kevin Amiranoff

1
Completamente irrelevante para a questão
jalooc 20/02/19
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.