获取propType名称、类型和isRequired

Question

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

例如,

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

看起来像

​

​

在Chrome开发工具中。这样，我就可以使用

Object.keys(component.type.propTypes)

但我也能得到丙型类型和它是否需要吗？

Answer 1

不怎么有意思。如果您检查ReactPropTypes.js，则导出的验证方法在私有范围内使用expectedType。

看看ReactElementValidator.js是如何调用propType验证的，这也很有趣。

如果您想要针对原语类型进行测试，您可能可以使用假道具迭代验证方法的调用，并捕获错误，直到它不抛出为止，但我认为这不是您想要的结果。

Answer 2

下面的函数根据propTypes答案提取@M_rivermount:s的名称、类型和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 变化，不能直接调用PropTypes验证器。可以使用Proptype的checkPropTypes方法手动检查类型。

而且，checkPropTypes不返回任何结果，而只是将警告记录到控制台。因此，要从类型检查中检索错误，检查支柱类型是救星。(尽管facebook/prop类型( 这里 )有一个允许从checkPropTypes外部日志记录的PR )

以下是@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;
}