Question

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

您必须将组件传递给connect返回的函数。而是收到{“ propTypes”：{}，“ displayName”：“ WithStyles（MyComponent）”，“ options”：{“ defaultTheme”：{“ breakpoints”：{“ keys”：[“ xs”，“ sm”，“ md“，” lg“，” xl“]，”值“： ...

MyComponent：

import { connect } from 'react-redux'
import MyComponent from './MyComponent'
...
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

MyContainer：

withStyles

如何迁移func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool { /* for facebook login */ if #available(iOS 9.0 , *){ return ApplicationDelegate.shared.application(app, open: url, sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String, annotation: options[UIApplication.OpenURLOptionsKey.annotation]) } /* for google signin */ return GIDSignIn.sharedInstance().handle(url as URL?, sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String, annotation: options[UIApplication.OpenURLOptionsKey.annotation]) }？

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中引入的其他功能（挂钩），可以使用不是的组件类型。 strong>一个功能。

React-redux的最新版本改用react-is包中的isValidElementType。这样可以正确识别forwardRef和其他方法返回的组件类型。

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

Answer 2

这是我的方法：

import { withStyles } from '@material-ui/core/styles';

定义样式对象：查看material-ui示例以获取指导

const styles => ({
  root: {
    display: 'flex',
  }
});

然后使用您的样式导出组件：

export default withStyles(styles)(YourComponent);

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

2 个答案: