Question

我注意到react组件有一个type.propTypes对象，它将所有propTypes保存为键。

例如，

Component.propTypes = { initialCount: React.PropTypes.number }

看起来像

在Chrome开发工具中。所以我可以使用

获得proptypes的名称

Object.keys(component.type.propTypes)

但我是否也可以获得proptypes类型以及是否需要它？

Answer 1

不是真的。如果您检查ReactPropTypes.js，则validation methods exported会在私有范围内使用expectedType。

查看ReactElementValidator.js以了解它如何调用propType validation也很有趣。

如果你想针对原始类型进行测试，你可能会使用伪道具将调用迭代到验证方法并捕获错误，直到它没有抛出，但我不认为这就是你所追求的。

Answer 2

以下函数根据@M_rivermount：s的答案提取propTypes的名称，类型和isRequired。

var extractPropTypes = (component) => {
  let propTypes = component.type.propTypes;
  let propNames = Object.keys(propTypes);

  let extractPropType = (propTypes, propName) => {
      let fakeProps = {};
      fakeProps[propName] = "dummy";
      let error = propTypes[propName](fakeProps, propName);
      if (error === null) {
          return "string";
      } else {
          const EXPECTED_TYPE_PATTERN = /expected `(\w+)`/i;
          return error.toString().match(EXPECTED_TYPE_PATTERN)[1];
      }
  };

  let extractPropIsRequired = (propTypes, propName) => {
      let fakeProps = {};
      fakeProps[propName] = null;
      let error = propTypes[propName](fakeProps, propName);
      return !!error;
  };

  return propNames.map(function (propName) {
      return {
          name: propName,
          type: extractPropType(propTypes, propName),
          isRequired: extractPropIsRequired(propTypes, propName)
      }
  });
};

Answer 3

使用propTypes API changed，不能直接调用PropTypes验证器。可以使用checkPropTypes Proptypes方法手动检查类型。

此外，checkPropTypes不会返回任何结果，而是仅将警告记录到控制台。因此，要从类型检查中检索错误，可以使用check-prop-types。（尽管有针对Facebook / prop-types here的PR，以允许来自checkPropTypes的外部日志记录）

这里是@Theodor的代码段的更新版本（略有变化）：

import checkPropTypes from 'check-prop-types';

getPropType(propTypes, propName) {
    let fakeProps = {};
    fakeProps[propName] = "dummy";

    let error = checkPropTypes(propTypes, fakeProps, 'prop');

    // extract type from error string
    if (error !== undefined) {
        const EXPECTED_TYPE_PATTERN = /expected (\w+)/i;
        return error.toString().match(EXPECTED_TYPE_PATTERN)[1];
    } else {
        // no error - it is string
        return 'string';
    }
}

getPropIsRequired(propTypes, propName){
    let fakeProps = {};
    fakeProps[propName] = null;
    let error =  checkPropTypes(propTypes,fakeProps);
    return !!error;
};

extractTypes(component) {
    let type_map = {};
    let propTypes = component.type.propTypes;
    Object.keys(propTypes).forEach((propName) => {
    let type = getPropType(propTypes, propName);
    let required = getPropsIsRequired(propTypes, propName)
    type_map[propName]= {
        type:type,
        required:required
        }
    });
    return type_map;
}

获取React propType名称，类型和isRequired

3 个答案: