React PropTypes: Дозволити різні типи PropTypes для однієї опори


244

У мене є компонент, який отримує опору для свого розміру. Опором може бути рядок або число, наприклад: "LARGE"або 17.

Чи можу я повідомити React.PropTypes, що це може бути те чи інше у валідації propTypes?

Якщо я не вказую тип, отримую попередження: prop type `size` is invalid; it must be a function, usually from React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}

Відповіді:


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

Дізнайтеся більше: Перевірка типу тексту за допомогою PropTypes


Дякую за це, я отримую випадкові помилки, коли виконую свої тести Jest, встановлюючи статичні прототипи в своїх класах: ReferenceError: oneOfType is not defined- якісь пропозиції? Спасибі заздалегідь!!
Сара Інес Кальдерон

Ви впевнені, що ви правильно імпортували import PropTypes from 'prop-types';?
Paweł Andruszków

ей там Pawel - так, саме так ми їх імпортуємо:import PropTypes from 'prop-types';
Sara Inés Calderón

1
2019 - використовуйте PropTypes.oneOf
Імдад

26

Для цілей документації краще перелічити рядкові значення, які є законними:

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

11

Це може допомогти вам:

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

1
Хоча цей код може відповісти на питання, надаючи додатковий контекст щодо того, чому та / або як цей код відповідає на питання, покращує його довгострокове значення.
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
Так, PropTypes живе зараз у власному пакеті, але це не відповідає на питання ...
Кевін Аміранов

1
Цілком не стосується питання
jalooc
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.