React redux 连接样式和路由器

Question

我正在尝试在 redux 中使用 connect 作为

连接 (mapstate.., mapdis..) (withstyles(dashboardstyle)(dashboard)

以上工作正常，但我还需要添加 withRouter。下面的变化给出了错误连接 (mapstate.., mapdis..) (withstyles(dashboardstyle), withrouter(dashboard))

每当我添加它时都会出现异常，例如不能将 class 用作函数。关于如何解决这个问题的任何想法

Answer 1

您需要安装 recompose：

npm i -s recompose

然后在你的组件中：

import compose from 'recompose/compose'


export default compose(
   withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps)
)(withRouter(Dashboard))

Answer 2

withStyles(styles) 的 return 值是多少？我怀疑它是一个"Higher Order Component"（HOC），这是一个期望传递给React组件来包装的函数，而return是一个React组件。如果是这样，那么您真的希望您的电话看起来像这样：

export default withStyles(styles)(
    connect(mapStateToProps, mapDispatchToProps)(withRouter(Dashboard))
)

不过，该代码非常难看，并且会随着添加更多 HOC 而迅速变得更糟，这就是为什么是一种更好的方法。（但我想添加更多上下文，以便读者了解是什么导致了 OP 中的问题。）

React redux 连接样式和路由器

React redux connect with with styles and withrouter

router

reactjs

react-redux