加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 20:12:07 所属栏目:百科 来源:网络整理
导读:假设以下代码: TestComponent.propTypes = { text: React.PropTypes.string,myEnum: React.PropTypes.oneOf(['News','Photos'])}; 我在另一个文件(使用TestComponent)中执行了以下操作: if (TestComponent.propTypes.text === React.PropTypes.string) {..
假设以下代码:

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 (TestComponent.propTypes.myEnum === React.PropTypes.oneOf(['News','Photos'])) {...}

所以,问题是:有什么机制来发现道具的类型?
我知道React会针对propType测试prop的值来验证它.但是,我还需要访问“预期类型”以完成我的工作.

顺便说一下,这里是React代码的摘录,用于验证propTypes(为简洁起见缩短):

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很好地处理了这个问题.我的观点是根据prop类型做一些特定的逻辑,我无法使用anyOf,objectOf,shape等类型.

有什么想法,建议??

解决方法

简短的回答,你无法比较这些,因为它们指向不同的功能.当你调用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.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读