Get the type of React components propTypes definition

Question

Suppose the following code:

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

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

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

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, 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);
}

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??

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.

Any thoughts, suggestions??

Answer 1

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

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

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().

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

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;

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 )

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.