如何验证按值传递给组件的道具？

问题描述

我有一个接受value道具的组件。

const MyComponent = ({ value }) => { ... }

我希望此值始终是一个大于0且小于1000的数字。

我仅出于测试目的而对此进行验证，以防万一我将错误的值传递给组件，以便立即知道我做错了什么。

我应该只编写简单的if语句引发错误吗？像这样吗？

const MyComponent = ({ value }) => { 
  if (value < 0 || value > 1000) {
    throw new Error("Value is not in range");
  }
}

有更好的方法吗？

感谢您的帮助：）

解决方法

如果我理解正确，那么问题将更多地围绕“最佳实践是什么？”。

如果是这样，则您想了解有关Guard Clauses

的更多信息 ,

好吧，我不记得当时想要达到的目标，但现在我知道了我要寻找的东西，即自定义PropType验证器

MyComponent.propTypes = {
  value: (props,propName,componentName) => {
    const val = props[propName];

    if (val < 0 || val > 1000) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  }
};

也许将来有人会发现它有用：）