升级到Material UI 4-withStyles后出现错误

小编典典

升级到Material UI 4-withStyles后出现错误

reactjs

从v3.9.x升级到MUI v4.0.2后，出现以下错误：

您必须将组件传递给connect返回的函数。而是收到{“ propTypes”：{}，“ displayName”：“
WithStyles（MyComponent）”，“ options”：{“ defaultTheme”：{“ breakpoints”：{“
keys”：[“ xs”，“ sm”，“ md“，” lg“，” xl“]，”值“：…

MyComponent：

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

const getStyles = theme => ({
  fooBar: {
    ...
  },
})

...
export default withStyles(getStyles)(MyComponent)

我的容器：

import { connect } from 'react-redux'
import MyComponent from './MyComponent'
...
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

如何迁移withStyles？

阅读 338

2020-07-22

共1个答案

小编典典

react-redux 5.0.7及更低版本对传递给的组件执行了以下验证connect：

https://github.com/reduxjs/react-
redux/blob/v5.0.7/src/components/connectAdvanced.js#L91

    invariant(
      typeof WrappedComponent == 'function',
      `You must pass a component to the function returned by ` +
      `${methodName}. Instead received ${JSON.stringify(WrappedComponent)}`
    )

通过引入React.forwardRef（在Material-UI v4中大量使用）和在React 16.8中引入的其他功能（挂钩），有可能具有
不是函数的组件类型。

最近的版本做出反应，终极版改用isValidElementType从react- is包。这样可以正确识别由forwardRef和其他方法返回的组件类型。

我相信react-redux的5.1版和更高版本应该都能正常工作，而不会错误地引起问题中提到的错误。

2020-07-22