ReactJS导出多个包装函数一个组件

Question

在反应中我试图导出一个名为IconButtons的类，我当前的导出就是：

export default withStyles(styles)(IconButtons);

这很好用，但我的应用程序需要Redux，所以我需要添加Connect包装器功能。我尝试了以下代码：

const iconExports = { 
    reduxConnect() { connect(mapStateToProps)(IconButtons) },
    stylesExport() { withStyles(styles)(IconButtons)}
}

export default iconExports;

这给了我一个错误：

type is invalid -- expected a string (for built-in components) or a 
class/function (for composite components) but got: object.

如何将这两个功能用于一次导出？

Answer 1

tl; dr：export default withStyles(styles)(connect(mapStateToProps)(IconButtons))

为什么呢？在您的第一个示例中，您要导出单个组件，这是调用withStyles(styles)(IconButtons)的结果。当您更改它时，您使用两种方法创建了一个对象：reduxConnect和stylesExport。每个都返回一个不同的组件。我不知道你是如何尝试使用这个导出值的，但我认为这不是你想要的，你想要的是一个单独的组件，它包含在connect和{{1 }}

我建议你阅读更高阶的组件（withStyles和connect都是返回高阶组件的函数）。简短的故事是HoC包装一个组件并返回一个新组件。因此，withStyles希望您为其提供一个组件并返回一个连接的组件。然后，您可以将该组件提供给connect。一个更详细的解决方案可能会使一切更加清晰：

withStyles

了解如何首先用const connectedIconButtons = connect(mapStateToProps)(IconButtons) const connectedIconButtonsWithStyles = withStyles(styles)(connectedIconButtons) export default connectedIconButtonsWithStyles 包裹IconButtons，然后用connect重新包装。