升级到 Material UI 4 后出现错误 - withStyles [英] I'm getting error after upgrading to Material UI 4 - withStyles

问题描述

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

I'm getting the following error after upgrading to MUI v4.0.2 from v3.9.x:

您必须将组件传递给 connect 返回的函数.而是收到 {"propTypes":{},"displayName":"WithStyles(MyComponent)","options":{"defaultTheme":{"breakpoints":{"keys":["xs","sm","md","lg","xl"],"值":...

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?

推荐答案

5.0.7 及更早版本的 react-redux 对传递给 connect 的组件进行了以下验证:

Version 5.0.7 and earlier of react-redux performed the following validation on the component passed to 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 中引入的其他功能(钩子)的引入，组件类型可能是 不是函数.

With the introduction of React.forwardRef (which is used heavily in Material-UI v4) and other features introduced in React 16.8 (hooks), it is possible to have a component type that is not a function.

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

More recent versions of react-redux instead use isValidElementType from the react-is package. This correctly recognizes the component types returned by forwardRef and other methods.

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

I believe versions 5.1 and later of react-redux should all work fine without erroneously causing the error mentioned in the question.

这篇关于升级到 Material UI 4 后出现错误 - withStyles的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！