正如文件所述here
array and object can be replaced with arrayOf and shape, respectively.
所以,我在我的项目中这样做了:
class X extends React.Component {
....
}
X.propTypes = {
somePorp: PropTypes.shape.isRequired, // this cause an warnning in firefox, but satisfied eslint syntax check
somePorp: PropTypes.object.isRequired, // no warnning in firefox, but can not satisfy eslint syntax check
}
问题:
如何避免 firefox 中出现警告消息,并通过 eslint 语法检查(最好不要修改 eslint 默认规则)?
顺便说一句:firefox 警告如下
Warning: Failed prop type: X: prop type
classes
is invalid; it must be a function, usually from theprop-types
package, but receivedundefined
.
最佳答案
您需要定义 Prop 的形状。如果您不确定,只需 console.log()
Prop 并查看其组成。 Click here to view the available PropType declarations .
例如,如果您要使用 redux
存储作为 react-router- 中的
作为 this.props.store
或 history
domthis.props.history
:
history: PropTypes.objectOf(PropTypes.func).isRequired, // object of funcs
store: PropTypes.shape({ // shape of...
dispatch: PropTypes.func.isRequired, // func
getState: PropTypes.func.isRequired, // func
liftedStore: PropTypes.objectOf(PropTypes.func).isRequired, // object of funcs
replaceReducer: PropTypes.func.isRequired, // func
subscribe: PropTypes.func.isRequired, // func
Symbol: PropTypes.func.isRequired, // func
}).isRequired
使用isRequired
时要小心,因为有时函数/数组/对象/值/等可能存在也可能不存在。对于上面的示例,所有这些都应该在组件安装时出现。
关于reactjs - eslint `forbid-prop-types` 规则导致 Firefox 控制台窗口出现警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53255824/