reactjs - 获取React组件的类型propTypes定义

Question

假设有以下代码:

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'])) {...}

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

顺便说一句，这里是验证 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 不会将预期类型保存到成员变量中，以便外部代码可以访问它。那么外部代码如何确定 propType 的类型呢？

我的观点不是“验证” Prop 的特定值。 React 很好地解决了这一问题。我的观点是根据 prop 类型执行一些特定的逻辑，而我无法使用 anyOf、objectOf、shape 等类型来实现这些逻辑。

有什么想法、建议吗？

Answer 1

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

说明:这里的问题是 React.PropTypes.oneOf 是函数 createEnumTypeChecker。

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

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

不幸的是，您的第二次尝试也不起作用，因为这些函数不同，它们是在您每次调用 oneOf() 时创建的。请参阅 ReactPropTypes.js

中的 createChainableTypeChecker

 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。