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

Question

假设我的反应组件应该这样调用

<comp propA='a' />

如果有人说

，我想检查使用 proptypes

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

我应该会收到一条警告，说 propB 不能被接受

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

Answer 1

就是这种东西Flow addresses. Flow is commonly used with React code (see 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 支持这个（我知道你说过你不想要自定义道具类型实现）。

另一种选择是使用 Typescript，它会在编译时而不是运行时强制执行此操作。

Answer 3

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

How to show warning if unknown prop is passed in react component?