获取React组件的类型propTypes定义 [英] Get the type of React components propTypes definition

问题描述

假设以下代码：

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

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

I did the following in another file (that was using TestComponent):

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

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

对我来说如果满意，首先要满意。但是第二个如果永不返回true。我试图将其修改为以下语法，但没有帮助。

Well, to my satisfaction the first if worked. But the second if never returned true. I tried to modify it to the syntax below, but it did not help.

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

我知道React会根据propType测试prop的值来验证它。但是，我也需要访问期望类型来做我的工作。

So, the question is: What mechanism is there to discover the type of a prop? I know that React tests the value of a prop against the propType to validate it. However, I need access to the 'expected type' as well to do my stuff.

BTW，这是来自React代码的摘录，该代码验证了propTypes（为简化起见简便起见）：

BTW, here's an excerpt from the React code that validates propTypes (shortened for the sake of brevity):

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。它在内部验证函数中使用（如果（propType！== ExpectedType））。但是，React不会将ExpectedType保存到成员变量中，以便外部代码可以访问它。那么外部代码如何确定propType的类型呢？

As you can see the parameter of the outer function is expectedType. It is used in the inner validate function (if (propType !== expectedType)). However, React does not save the expectedType into a member variable so that it can be accessed by outside code. So how does outside code figure out the type of the propType??

我的意思不是要验证道具的特定值。 React很好地解决了这一问题。我的观点是根据道具类型做一些特定的逻辑，而我无法使用诸如anyOf，objectOf，shape等类型。

My point is not to 'validate' a specific value for the prop. That gets taken care of by React very well. My point is to do some specific logic depending on the prop type, which I can't get to with types like anyOf, objectOf, shape, etc.

任何想法，建议？

推荐答案

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

Short answer, you can't compare these, because they point to different functions. When you call oneOf, it returns another function.

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

Explanation: The problem here is that React.PropTypes.oneOf is the function createEnumTypeChecker.

而 React.PropTypes.myEnum 将包含调用 oneOf 函数-因为在 propTypes 定义中，您必须实际调用 oneOf（）。

Whereas React.PropTypes.myEnum will contain the return value of calling the oneOf function - because in the propTypes definition you have to actually call oneOf().

调用 oneOf（）的结果是一个不同的函数，在 createChainableTypeChecker（ ）。

The result of calling oneOf() is a different function, declared inside createChainableTypeChecker().

不幸的是，您的第二次尝试也不起作用，因为这些函数是不同的，它们是在您每次调用 oneOf（）<时创建的。 / code>。请参见 ReactPropTypes.js

Unfortunately, your second try, won't work either because these functions are different, they're created each time you call oneOf(). See createChainableTypeChecker in ReactPropTypes.js

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

 return chainedCheckType;

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

Solution: I propose you test the names of the functions. This will prove that this is a valid React Prop type.

// 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 还是其他任何一个，包括任何。

Unfortunately, all non-primitive React propTypes use createChainableTypeChecker, and this always returns a function with the name checkType. If this name would be different for each propType, then you would be able to check which type is used. As it is now, you can't know if it's oneOf, objectOf or any of the others, including any.

这篇关于获取React组件的类型propTypes定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！