reactjs - 具有特定长度的 React.PropTypes 数组

Question

是否可以使用React.PropTypes来强制数组的长度？

这是一个非常简单的案例:

const TWO_NUMBERS = PropTypes.array; // i need this to be an array of two numbers

我知道在 JavaScript 中数组只是对象，所以我尝试了这个:

const TWO_NUMBERS = PropTypes.shape({
    0: PropTypes.number.isRequired,
    1: PropTypes.number.isRequired,
});

然而，这一直警告我需要一个对象，但得到一个数组。

Answer 1

在这种情况下，您需要编写自己的特殊 PropTypes 函数，该函数由 React 提供给您执行。

const TWO_NUMBERS = function(props, propName, componentName) {
  if (!Array.isArray(props.TWO_NUMBERS) || props.TWO_NUMBERS.length != 2 || !props.TWO_NUMBERS.every(Number.isInteger)) {
    return new Error(`${propName} needs to be an array of two numbers`);
  }

  return null
}

如果 TWO_NUMBERS 不是一个数组，不是一个数组，并且不是一个仅包含整数的数组。

您可以在此处获取有关 proptype 函数的信息:

https://facebook.github.io/react/docs/typechecking-with-proptypes.html#react.proptypes

它位于该示例 block 的底部。