升级到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": ...
MyComponent:
MyComponent:
import { withStyles } from '@material-ui/core/styles'
const getStyles = theme => ({
fooBar: {
...
},
})
...
export default withStyles(getStyles)(MyComponent)
MyContainer:
MyContainer:
import { connect } from 'react-redux'
import MyComponent from './MyComponent'
...
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)
如何迁移withStyles
?
推荐答案
react-redux的版本5.0.7和更早版本对传递给connect
的组件执行了以下验证:
Version 5.0.7 and earlier of react-redux performed the following validation on the component passed to connect
:
https://github.com. 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
包中的a>.这样可以正确识别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屋!