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

Question

从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？

Answer 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版和更高版本应该都能正常工作，而不会错误地引起问题中提到的错误。