获取 React 组件的类型 propTypes 定义 [英] Get the type of React components propTypes definition
问题描述
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??
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
.
这篇关于获取 React 组件的类型 propTypes 定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!