React.js中如何用prop-types库定义允许null或number的PropTypes

哦，我明白你遇到的问题了——你尝试用oneOf和oneOfType来设置数字或null的属性验证，但没成功对吧？这是因为你对这两个验证器的用法有点误解，我来给你理清楚：

为什么你的写法不生效？ #

先拆解你写的两种方式：

1. PropTypes.oneOf([ PropTypes.number, null, ])：
   oneOf是用来限定属性必须是数组中的某个具体值，比如oneOf([1, 2, 3])会要求属性值只能是1、2或3。但你这里把PropTypes.number（一个类型验证器）和null（一个值）放在一起，完全不符合它的设计逻辑，所以肯定不会生效。

2. PropTypes.oneOfType([ PropTypes.number, null, ])：
   oneOfType是用来限定属性必须是数组中的某个类型，它接受的是类型验证器的数组（比如PropTypes.number、PropTypes.string），但null是一个具体值，不是类型验证器，所以prop-types无法识别它。

正确的写法 #

要实现“允许属性为数字或null”，你需要结合oneOfType（处理类型）和oneOf（处理null这个具体值），像这样：

import PropTypes from 'prop-types';

// 允许属性为数字、null，或者不传递（即undefined）
yourComponent.propTypes = {
  yourProp: PropTypes.oneOfType([
    PropTypes.number, // 允许数字类型
    PropTypes.oneOf([null]) // 允许null值
  ]),
};

进阶用法：要求属性必须存在（不能是undefined） #

如果你希望属性必须被传递，且值只能是数字或null，只需在后面加上.isRequired：

yourComponent.propTypes = {
  yourProp: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([null])
  ]).isRequired,
};

补充：设置默认值为null #

如果想让属性默认值为null，可以搭配defaultProps：

yourComponent.defaultProps = {
  yourProp: null,
};

这样就能完美实现你想要的“属性可以是数字或null”的验证需求啦！

内容的提问来源于stack exchange，提问作者ey dee ey em