Tepki Proptipleri: Bir prop için farklı PropTip tiplerine izin ver


244

Boyutu için bir pervane alan bir bileşenim var. Prop bir dize veya ex: "LARGE"veya bir sayı olabilir 17.

React.PropTypes'ın bunun propTypes doğrulamasında biri veya diğeri olabileceğini bilmesini sağlayabilir miyim?

Türü belirtmezsem bir uyarı alırım: prop type `size` is invalid; it must be a function, usually from React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}

Yanıtlar:


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

Daha fazla bilgi edinin: PropTypes ile Typechecking


Bunun için teşekkürler, benim sınıflarda statik Proptypes ayarlama Jest testleri çalıştırırken rastgele hatalar alıyorum: ReferenceError: oneOfType is not defined- herhangi bir öneri? Şimdiden teşekkürler!!
Sara Inés Calderón

u doğru aktardığınızdan emin import PropTypes from 'prop-types';misiniz?
Paweł Andruszków

hey orada Pawel - evet, biz onları nasıl ithal ediyoruz:import PropTypes from 'prop-types';
Sara Inés Calderón

1
2019 - PropTypes.oneOf kullanın
Imdad

26

Belgeleme amacıyla, yasal olan dize değerlerini listelemek daha iyidir:

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

11

Bu sizin için işe yarayabilir:

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

1
Bu kod soruyu cevaplayabilirken, bu kodun soruyu neden ve / veya nasıl cevapladığı konusunda ek bağlam sağlamak uzun vadeli değerini arttırır.
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
Evet, PropTypes şimdi kendi paketinde yaşıyor, ancak bu soruya cevap vermiyor ...
Kevin Amiranoff

1
Soru ile tamamen ilgili değil
jalooc
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.