道具驗證中缺少“類” - Linting

Question

我遇到了一些棉絨問題。 它一直有效，但今天抱怨道具“課程”。 我正在使用 React Hooks。

我的組件具有這種結構

import { withStyles, WithStyles } from '@material-ui/core/styles'

interface Props extends WithStyles<typeof styles> {
  firstProps: string
  secondProps: number
  thirdProps: Function
}

const MyComponent = ({
  classes,
  firstProps,
  secondProps
  thirdProps
}: Props) => {
  ...my code...
}

export default withStyles(styles)(MyComponent)

我知道我應該通過接口中的classes ，例如：

interface Props extends WithStyles<typeof styles> {
  firstProps: string
  secondProps: number
  thirdProps: Function
  classes: {
  ... all my classes ..
  }
}

但這是我想避免的事情，因為它很笨重而且因為我認為export default withStyles(styles)(MyComponent)應該足夠了（就像今天之前一樣）。

使用當前代碼，我收到很多 lint 錯誤，例如：

'classes' is missing in props validation
'classes.img' is missing in props validation
'classes.currentSelect' is missing in props validation
'classes.todayDate' is missing in props validation

Answer 1

對如何使用樣式會更有幫助

https://material-ui.com/styles/basics/#higher-order-component-api

Answer 2

如果您使用鈎子，為什么不使用 makeStyles？

https://material-ui.com/styles/basics/#hook-api

如果您將它與 typescript 一起使用，我建議您將它與 createStyles() 一起使用

https://material-ui.com/styles/api/#createstyles-styles-styles

Answer 3

解決了

在package.json "eslint-plugin-react": "^7.17.0",更改為"eslint-plugin-react": "7.20.0"