reactjs - eslint `forbid-prop-types` 规则导致 Firefox 控制台窗口出现警告

Question

正如文件所述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 the prop-types package, but received undefined.

Answer 1

您需要定义 Prop 的形状。如果您不确定，只需 console.log() Prop 并查看其组成。 Click here to view the available PropType declarations .

例如，如果您要使用 redux 存储作为 react-router- 中的 this.props.store 或 history dom 作为 this.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时要小心，因为有时函数/数组/对象/值/等可能存在也可能不存在。对于上面的示例，所有这些都应该在组件安装时出现。