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';?
Павел Андрушкув
Привет, Павел, да, вот как мы их импортируем:import PropTypes from 'prop-types';
Сара Инес Кальдерон
1
2019 - использование PropTypes.oneOf
Имдад
26

Для документации лучше перечислить допустимые строковые значения:

size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([ 'SMALL', 'LARGE' ]),
]),
cleong
источник
11

Это может работать для вас:

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
CorrinaB
источник
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