React PropTypes：如何更优验证数值是否在指定范围内？

当然有更优雅的解决方案！不用硬把每个数值都塞进PropTypes.oneOf()里，我们可以通过自定义PropTypes验证器来实现范围检查，既简洁又灵活。

写一个可复用的验证器，传入最小和最大值就能检查数值是否在区间内：

import PropTypes from 'prop-types';

// 自定义范围验证工具函数
const numberInRange = (min, max) => (props, propName, componentName) => {
  const value = props[propName];
  // 先检查类型是否为数字，再判断是否在范围内
  if (typeof value !== 'number' || value < min || value > max) {
    return new Error(
      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. Expected a number between ${min} and ${max}, got ${typeof value === 'number' ? value : typeof value}.`
    );
  }
};

// 在组件中使用
const MyComponent = ({ rating }) => {
  return <div>Rating: {rating}</div>;
};

MyComponent.propTypes = {
  // 验证rating必须是1-10之间的数字
  rating: numberInRange(1, 10).isRequired,
};

这个函数的好处是复用性极强——以后要验证其他范围（比如0-100的分数），直接传不同的min和max就行，不用重复写逻辑。

如果你的项目已经用了TypeScript，除了运行时的PropTypes验证，还可以通过类型系统在编译阶段就限制数值范围：

// 定义1-10的字面量类型
type Rating = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;

interface MyComponentProps {
  rating: Rating;
}

const MyComponent = ({ rating }: MyComponentProps) => {
  return <div>Rating: {rating}</div>;
};

// 依然可以配合上面的自定义PropTypes做运行时验证
MyComponent.propTypes = {
  rating: numberInRange(1, 10).isRequired,
};

这样既在编译阶段就避免了非法值，又保留了运行时的错误提示，双重保障。

如果不想自己写验证函数，也可以用prop-types-extra这类第三方库，它内置了range验证器：

import PropTypes from 'prop-types';
import { range } from 'prop-types-extra';

MyComponent.propTypes = {
  rating: range(1, 10).isRequired,
};

不过如果项目依赖尽量精简的话，自己写个几行的自定义函数反而更轻量。

总之，自定义验证器是解决这类问题的最优解，告别冗长的枚举列表，代码更干净也更易维护～

内容的提问来源于stack exchange，提问作者Pablo De Luca