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

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

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

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

prop类型size无效;它必须是一个函数，通常是从 React.PropTypes . < / p >

MyComponent.propTypes = {
size: React.PropTypes
}

151825 次浏览

小开

最佳答案

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

了解更多信息:使用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

小开

这可能对你有用:

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

小开

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

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

小开

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

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;