Question

假设我的react组件应这样调用

<comp propA='a' />

我想检查是否有人说

<comp propA='a' propB='a' />

我应该得到一条警告，说不能接受propB

我不想使用自定义道具类型实现，只是想知道此问题是否已解决？

Answer 1

Flow就是这种事情。 Flow通常与React代码一起使用（请参见this part of the documentation）。

您已经说过您不想自己做（好！），以防万一其他人最终在这里这样做：很容易地检查对象的构造函数中不需要的属性（或函数（如果是SFC）：

if (Object.keys(props).some(prop => prop !== "propA")) {
    throw new Error(prop + " is not a valid property for <component name>");
}

Answer 2

prop-types软件包当前不支持此功能。这是一个要求解决的公开问题：https://github.com/facebook/prop-types/issues/11。

https://github.com/airbnb/prop-types似乎通过forbidExtraProps支持了这一点（我知道您说过您不需要自定义prop类型的实现）。

另一个选择是使用Typescript，它将在编译时而不是在运行时强制执行。

Answer 3

prop-types-exact可能是一个有用的模块：https://www.npmjs.com/package/prop-types-exact

Answer 4

我不知道您为什么不想使用自定义道具来实现。但这是您要实现的唯一方法：

Comp.propTypes = {
  customProp: function(props, propName) {
    if(propName !== 'propA') { // you could even use regex
     return new Error(`${propName} cannot be accepted`)
    }
  }
}

如果在响应组件中传递了未知的道具，如何显示警告？

4 个答案: