Question

是否可以使用Rect.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,
});

然而，这一直告诉我expected an object but got an array。

Answer 1

在这种情况下，您需要编写自己的特殊PropTypes函数，该函数可以让您做出反应。

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不是数组，不是2的数组，并且不是只有整数的数组，则会抛出错误。

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

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

它位于该示例块的底部。

Answer 2

自定义函数在这里是正确的方法。

vc2.itemSelectedHandler = ^{
    [vc1.tableView reloadData];
}

Answer 3

受到@finalfreq答案的启发，我想出了这个。它处理两个数字（在这种情况下为浮点数），也可以用作arrayOf(twoNumbers)。不知道如何让它像twoNumbers.isRequired那样工作......

此外，如果您在验证比较中不使用否定，我认为代码更清晰，更容易理解。

import invariant from 'invariant';

function isValid(value) {
  return Array.isArray(value) && value.length === 2 && value.every(Number.isFinite);
}

export default function twoNumbers(props, propName, componentName) {
  if (Array.isArray(props)) {
    props.forEach((item, index) => {
      invariant(
        isValid(item),
        `Array item index ${index} is ${item}, but needs to be an array of two numbers`
      );
    });
  }

  const value = props[propName];

  if (!value) return; // not required so could be null

  invariant(isValid(value), `${componentName} ${propName} needs to be an array of two numbers`);
}

Answer 4

.[[1]] <- .[[1]]+.[[2]])检查不属于属性的类型。此外，在生产模式下禁用检查PropTypes。这使得PropTypes无法在运行时检查不断变化的数组长度。

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

4 个答案: