从 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
?
最佳答案
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及更高版本应该都能正常工作,不会错误地导致问题中提到的错误。
关于reactjs - 升级到 Material UI 4 - withStyles 后出现错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56448807/