首页 文章

获取React组件propTypes定义的类型

提问于
浏览 次
4

假设以下代码：

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的类型？

我的观点是不要“验证”道具的具体 Value . React很好地处理了这个问题 . 我的观点是根据prop类型做一些特定的逻辑，我无法使用anyOf，objectOf，shape等类型 .

有什么想法，建议??

reactjs components

1 回答

  • 4

    简短的回答，你无法比较这些，因为它们指向不同的功能 . 当你调用 oneOf 时，它会返回另一个函数 .

    Explanation ：这里的问题是 React.PropTypes.oneOf 是函数 createEnumTypeChecker .

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

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

    不幸的是，你的第二次尝试，每次打电话 oneOf() 时都会创建't work either because these functions are different, they' . 见 ReactPropTypes.js 中的 createChainableTypeChecker

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

 return chainedCheckType;

    Solution: 我建议你测试函数的名称 . 这将证明这是一种有效的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的名称不同，那么您将能够检查使用的类型 . 就像现在一样，你可以't know if it' s oneOf ， objectOf 或其他任何一个，包括 any .

    回复于

相关问题