React：检测变量的PropTypes

Question

在React组件中，如果我声明：

MyComponent.propTypes = {
  // An object that could be one of many types
  header: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
}

我如何知道在我的render方法中header是字符串还是数字？

- anhldbk

Answer 1

在你的render方法中，你可以使用typeof运算符来确定header变量的类型。如果你有类似Lodash这样的工具库，也可以使用其中的实用方法（_.isString，_.isNumber等）。

注意：你的注释“一个可能是...的对象”应该重新表述为“一个可能是...的变量”，因为你说它不是一个对象，而是一个字符串或数字。

- Jon Rubins

Answer 2

实际上，如果值的类型是原始类型之一（如字符串、数字...），您可以使用 @jrubins 上述方法。

对于自定义 React 组件，必须检查关联字段.type。以下是演示代码：

Steps.propTypes = {
  // must not be an empty array of Step
  children: PropTypes.arrayOf(function(props, propName) {
    const value = props[propName];
    if ( value.type !== Step) {
      return new Error('Must supply an instance of Step');
    }
  }),
};

- anhldbk