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

Question

我有一个组件接受 value 属性。

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

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

我只想出于测试目的验证它，以防我向组件传递了错误的值，以便我立即知道我做错了什么。

我应该只写一个抛出错误的简单 if 语句吗？是这样的吗？

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

有没有更好的方法？

感谢您的帮助:)

Answer 1

如果我理解正确的话，这个问题更多地围绕 'whats the best practice?'。

如果是这样，您正在考虑进一步了解 Guard Clauses

Answer 2

好吧，我不记得我当时想要实现什么，但我现在知道我在寻找什么，那就是 Custom PropType validator

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.'
      );
    }
  }
};

也许以后有人会觉得它有用:)

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

How to validate props that are passed to a component by value?

reactjs

react-props