React PropTypes：允许一个 prop 使用不同类型的 PropTypes答案

【问题标题】：React PropTypes: Allow different types of PropTypes for one propReact PropTypes：允许一个 prop 使用不同类型的 PropTypes
【发布时间】：2017-06-08 02:03:11
【问题描述】：

我有一个组件接收它的大小的道具。 prop 可以是字符串或数字，例如："LARGE" 或 17。

我可以让React.PropTypes 知道这可以是 propTypes 验证中的一个或另一个吗？

如果我没有指定类型，我会收到警告：

prop 类型size 无效；它必须是一个函数，通常来自 React.PropTypes。

MyComponent.propTypes = {
    size: React.PropTypes
}

【问题讨论】：

标签： reactjs react-proptypes

【解决方案1】：

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

了解更多：Typechecking With PropTypes

【讨论】：

感谢您，我在运行我的 Jest 测试时遇到随机错误，在我的课程中设置静态 Proptypes：ReferenceError: oneOfType is not defined — 有什么建议吗？提前致谢！
你确定你已经正确导入了import PropTypes from 'prop-types'; 吗？
嘿，Pawel -- 是的，这就是我们导入它们的方式：import PropTypes from 'prop-types';
2019 - 使用 PropTypes.oneOf
@Imdad: oneOf 不用于类型检查，仅用于限制属性的实际值。因此继续使用PropTypes.oneOfType。

【解决方案2】：

出于文档目的，最好列出合法的字符串值：

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

【讨论】：

当 prop 应该是 Enum 时，这是这样做的。您甚至可以为oneOf 方法提供一个枚举。

【解决方案3】：

这可能对你有用：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

【解决方案4】：

这是使用多 proptypes 和单个 proptype 的专业示例。

import React, { Component } from 'react';
import { string, shape, array, oneOfType } from 'prop-types';

class MyComponent extends Component {
  /**
   * Render
   */
  render() {
    const { title, data } = this.props;

    return (
      <>
        {title}
        <br />
        {data}
      </>
    );
  }
}

/**
 * Define component props
 */
MyComponent.propTypes = {
  data: oneOfType([array, string, shape({})]),
  title: string,
};

export default MyComponent;

【讨论】：

【解决方案5】：

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

【讨论】：

是的，PropTypes 现在存在于它自己的包中，但这并不能回答问题......
与问题完全无关