如何结合withStyles、connect与reduxForm装饰导出React组件？

你遇到的问题其实是多个高阶组件（HOC）的组合使用，这里的关键是正确的包裹顺序，同时避免多个export default的冲突。下面我给你两种清晰的实现方式：

方式一：嵌套调用高阶组件 #

这种方式直接通过嵌套函数调用组合三个HOC，逻辑直观：

import { reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withStyles } from '@material-ui/core/styles'; // 假设你用的是Material-UI的withStyles

const mapStateToProps = state => ({summary: state.dashboard.summary})
const mapDispatchToProps = dispatch => bindActionCreators({dashboardList}, dispatch)

// 核心组合逻辑：从内到外依次是 withStyles → reduxForm → connect
export default connect(mapStateToProps, mapDispatchToProps)(
  reduxForm({
    form: 'dashboardForm' // 必须指定唯一的表单名称，reduxForm必填项
  })(
    withStyles(dashboardStyle)(Dashboard)
  )
);

方式二：使用compose简化组合 #

当HOC数量较多时，嵌套写法会显得杂乱，这时可以用Redux提供的compose函数（或类似工具函数）来扁平化组合顺序，它会从右到左依次执行HOC：

import { reduxForm } from 'redux-form';
import { connect, compose } from 'react-redux'; // 从react-redux导入compose
import { bindActionCreators } from 'redux';
import { withStyles } from '@material-ui/core/styles';

const mapStateToProps = state => ({summary: state.dashboard.summary})
const mapDispatchToProps = dispatch => bindActionCreators({dashboardList}, dispatch)

// 组合顺序：最右侧的withStyles先包裹组件，然后是reduxForm，最后是connect
const enhance = compose(
  connect(mapStateToProps, mapDispatchToProps),
  reduxForm({ form: 'dashboardForm' }),
  withStyles(dashboardStyle)
);

// 用组合后的enhance函数装饰组件
export default enhance(Dashboard);

关键注意点： #

• 顺序不能乱：withStyles要最靠近你的Dashboard组件（负责注入样式props），然后是reduxForm（处理表单的Redux状态逻辑），最后是connect（注入全局Redux状态和dispatch方法）。
• reduxForm必须配置form名称：这是reduxForm的必填参数，用来在Redux store中区分不同的表单实例。
• 只能有一个export default：你原来的代码里写了两个默认导出，这会导致语法错误，必须合并成一个。

内容的提问来源于stack exchange，提问作者Andre Felipe Jesus do Nascimen