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

Question

从 v3.9.x 升级到 MUI v4.0.2 后，我收到以下错误:

You must pass a component to the function returned by connect. Instead received {"propTypes":{},"displayName":"WithStyles(MyComponent)","options":{"defaultTheme":{"breakpoints":{"keys":["xs","sm","md","lg","xl"],"values": ...

我的组件:

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(钩子(Hook))中引入的其他功能，可以拥有一个<强>不是函数。

更新版本的react-redux改为使用isValidElementType来自 react-is 包。这可以正确识别 forwardRef 和其他方法返回的组件类型。

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