获取 React 组件的类型 propTypes 定义答案

【问题标题】：Get the type of React components propTypes definition获取 React 组件的类型 propTypes 定义
【发布时间】：2016-09-25 00:48:39
【问题描述】：

假设如下代码：

TestComponent.propTypes = {
  text: React.PropTypes.string,
  myEnum: React.PropTypes.oneOf(['News', 'Photos'])
};

我在另一个文件（使用 TestComponent）中做了以下操作：

if (TestComponent.propTypes.text === React.PropTypes.string) {...}

if (TestComponent.propTypes.myEnum === React.PropTypes.oneOf) {...}

好吧，如果成功的话，我很满意。但第二个 if 从未返回 true。我尝试将其修改为以下语法，但没有帮助。

if (TestComponent.propTypes.myEnum === React.PropTypes.oneOf(['News', 'Photos'])) {...}

所以，问题是：有什么机制可以发现道具的类型？我知道 React 会根据 propType 测试道具的值来验证它。但是，我还需要访问“预期类型”才能完成我的工作。

顺便说一句，这是验证 propTypes 的 React 代码的摘录（为简洁起见而缩短）：

function createPrimitiveTypeChecker(expectedType) {
  function validate(props, propName, componentName, location, propFullName){      
    var propValue = props[propName];
    var propType = getPropType(propValue);
    if (propType !== expectedType) {
      // return some Error
     }
     return null;
  }
  return createChainableTypeChecker(validate);
}

如你所见，外层函数的参数是expectedType。它用于内部验证函数（if (propType !== expectedType)）。但是，React 不会将 expectedType 保存到成员变量中，以便外部代码可以访问它。那么外部代码是如何判断propType的类型的呢？？

我的意思不是“验证”道具的特定值。 React 很好地处理了这一点。我的观点是根据道具类型做一些特定的逻辑，我无法使用诸如 anyOf、objectOf、shape 等类型。

有什么想法、建议吗？？

【问题讨论】：

查看我的回复以获得解释。有一个功能请求和一个正在进行的 PR 来解决这个问题，请参阅此处和 +1：github.com/facebook/react/issues/8310

标签： reactjs components

【解决方案1】：

简短的回答，您无法比较这些，因为它们指向不同的功能。当您调用oneOf 时，它会返回另一个函数。

解释：这里的问题是React.PropTypes.oneOf是函数createEnumTypeChecker。

而React.PropTypes.myEnum 将包含调用oneOf 函数的返回值 - 因为在propTypes 定义中您必须实际调用oneOf()。

调用oneOf() 的结果是一个不同的函数，在createChainableTypeChecker() 中声明。

很遗憾，您的第二次尝试也不起作用，因为这些函数是不同的，它们是在您每次调用 oneOf() 时创建的。见createChainableTypeCheckerReactPropTypes.js

 var chainedCheckType = checkType.bind(null, false);
 chainedCheckType.isRequired = checkType.bind(null, true);

 return chainedCheckType;

解决方案：我建议你测试一下函数的名称。这将证明这是一个有效的 React Prop 类型。

// returns false
React.PropTypes.oneOf(['myArr']) === React.PropTypes.oneOf(['myArr'])

// returns true
React.PropTypes.oneOf(['myArr']).name == React.PropTypes.oneOf(['myArr']).name

// this should return true in your case:
if ( TestComponent.propTypes.myEnum.name === React.PropTypes.oneOf().name )

不幸的是，所有非原始 React propTypes 都使用 createChainableTypeChecker，这总是返回一个名为 checkType 的函数。如果每个 propType 的名称都不同，那么您将能够检查所使用的类型。就像现在一样，你无法知道它是oneOf、objectOf 还是其他任何一个，包括any。

【讨论】：