eslint `forbid-prop-types` 規則在 Firefox 控制台窗口中導致警告

Question

正如文件所說的here

array 和object可以分別替換為 arrayOf 和shape 。

所以，我在我的項目中這樣做了：

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 警告如下所示

警告：失敗的道具類型：X：道具類型classes無效； 它必須是一個函數，通常來自prop-types包，但收到undefined 。

Answer 1

您需要定義道具的形狀。 如果您不確定，只需console.log()道具並查看它的組成。 單擊此處查看可用的 PropType 聲明。

例如，如果您要將redux存儲用作this.props.store或將react-router-dom history用作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時要小心，因為有時函數/數組/對象/值/等可能存在也可能不存在。 對於上面的示例，所有這些都應該在組件安裝時出現。

Answer 2

您還可以使用以下方式：

X.propTypes = {
    somePorp:  PropTypes.objectOf(PropTypes.object()),  
}