React PropTypes: Zezwól na różne typy PropTypes dla jednego rekwizytu

244

Mam komponent, który otrzymuje rekwizyt ze względu na jego rozmiar. Rekwizyt może być ciągiem znaków lub liczbą np .: "LARGE"lub 17.

Czy mogę poinformować React.PropTypes, że może to być jedno lub drugie w sprawdzaniu poprawności propTypes?

Jeśli nie podam typu, pojawia się ostrzeżenie: prop type `size` is invalid; it must be a function, usually from React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}
Kevin Amiranoff
źródło

Odpowiedzi:

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

Dowiedz się więcej: Sprawdzanie typu za pomocą PropTypes

Paweł Andruszków
źródło
Dzięki za to dostaję przypadkowe błędy, kiedy uruchamiam testy Jest ustawiając statyczne Proptypy w moich klasach: ReferenceError: oneOfType is not defined- jakieś sugestie? Z góry dziękuję!!
Sara Inés Calderón
czy na pewno masz poprawnie zaimportowany import PropTypes from 'prop-types';?
Paweł Andruszków
hej tam Paweł - tak, importujemy je w ten sposób:import PropTypes from 'prop-types';
Sara Inés Calderón
1
2019 - skorzystaj z PropTypes.oneOf
Imdad
26

Do celów dokumentacji lepiej jest podać wartości ciągów, które są zgodne z prawem:

size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([ 'SMALL', 'LARGE' ]),
]),
Cleong
źródło
11

To może Ci pomóc:

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
CorrinaB
źródło
1
Chociaż ten kod może odpowiedzieć na pytanie, zapewnienie dodatkowego kontekstu dotyczącego tego, dlaczego i / lub jak ten kod odpowiada na pytanie, poprawia jego długoterminową wartość.
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
Michael
źródło
16
Tak, PropTypes żyje teraz w swoim własnym pakiecie, ale to nie odpowiada na pytanie ...
Kevin Amiranoff
1
Zupełnie nie dotyczy pytania
jalooc