获取 React 组件的类型 propTypes 定义

IT技术 reactjs components
2021-05-15 21:47:05

假设以下代码：

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

好吧，让我满意的是第一个如果有效。但是第二个如果从未返回 true。我尝试将其修改为下面的语法，但没有帮助。

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

所以，问题是：有什么机制可以发现 prop 的类型？我知道 React 会根据 propType 测试 prop 的值来验证它。但是，我还需要访问“预期类型”才能完成我的工作。

顺便说一句，这是验证 propTypes 的 React 代码的摘录（为简洁起见缩短）：

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

我的观点不是“验证”props的特定值。React 很好地处理了这一点。我的观点是根据 prop 类型做一些特定的逻辑，我无法使用 anyOf、objectOf、shape 等类型。

任何想法，建议？

1个回答

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

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

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

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

不幸的是，您的第二次尝试也不起作用，因为这些函数是不同的，每次调用oneOf(). 见createChainableTypeChecker在ReactPropTypes.js

 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.

其它你可能感兴趣的问题
上一篇身份服务器注册不会重定向回 React 应用程序 下一篇如何在 React Router v4 路由之间共享应用程序状态