React PropTypes:允许一个道具使用不同类型的PropTypes

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

我可以让React。PropTypes知道这可以是一个或另一个在PropTypes验证?

如果我不指定类型，我会得到一个警告:

道具类型大小无效;它必须是一个函数，通常是从 React.PropTypes。

MyComponent.propTypes = {
    size: React.PropTypes
}

当前回答

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

2017-10-30 22:04:16

其他回答

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

了解更多信息:使用PropTypes进行类型检查

2017-01-23 14:22:07

这可能对你有用:

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

2018-03-09 08:58:46

这里有一个使用多原型和单一原型的例子。

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;

2020-07-01 03:46:39

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

2017-10-30 22:04:16

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

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

2018-09-17 23:41:32

React PropTypes:允许一个道具使用不同类型的PropTypes

推荐文章

最新文章

标签