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
}

Odpowiedzi:


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

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


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' ]),
]),

11

To może Ci pomóc:

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

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

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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.