React PropTypes：1つのプロップに異なるタイプのPropTypeを許可します

244

そのサイズの小道具を受け取るコンポーネントがあります。小道具は文字列または数値ex："LARGE"またはのいずれか17です。

React.PropTypesに、propTypes検証でどちらか一方であることを通知できますか？

タイプを指定しないと、警告が表示されます。 prop type `size` is invalid; it must be a function, usually from React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}

reactjs react-proptypes

— ケビン・アミラノフ
ソース

572

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

追加情報：PropTypesによる型チェック

— パウェス・アンドルシュクフ
ソース

このおかげで、クラスで静的プロップタイプを設定するJestテストを実行すると、ランダムエラーが発生ReferenceError: oneOfType is not definedします。前もって感謝します！！

— サライネスカルデロン

正しくインポートされていimport PropTypes from 'prop-types';ますか？

— パヴェルAndruszków

ちょっとそこパヴェル-はい、これは私たちがそれらをインポートする方法である：import PropTypes from 'prop-types';

— サライネス・カルデロン

1

2019-PropTypes.oneOfを使用する

— Imdad

26

文書化の目的で、有効な文字列値をリストすることをお勧めします。

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

— クロン
ソース

11

これはあなたのために働くかもしれません：

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

— CorrinaB
ソース

1

このコードは質問に答えることがありますが、このコードが質問に答える理由や方法に関する追加のコンテキストを提供すると、長期的な価値が向上します。

— rollstuhlfahrer 2018年

-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は現在、独自のパッケージに含まれていますが、それは質問の答えにはなりません...

— Kevin Amiranoff '31 / 10/31

1

質問とはまったく関係ありません

— jalooc