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

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.