如何将材料UI's HOC组合在一起

Question

目前正在尝试组合多个材质UI组件，以便它们渲染。目前，我有:

export default connect(mapStateToProps, mapDispatchToProps)(withTheme()(withStyles(styles)(ShopStore)));

这行得通。但是现在，我想添加一个新的HOC，这是Material UI的withWidth HOC。我已经尝试了各种各样的位置注入这个HOC，但每一个尝试只是导致整个组件本身没有显示在页面上。我做了一些研究，看到有人建议别人使用一个名为compose的第三方库。但是，最好不要使用它。如果有其他方法，请告诉我，谢谢。

Answer 1

React特别建议在这种情况下使用compose实用程序函数:

撰写实用程序函数由许多第三方库提供，包括lodash(作为lodash. flowright)， Redux和Ramda。

export default compose(
connect(mapStateToProps,mapDispatchToProps)
withTheme(),
withStyles(styles),
withWidth()
)(ShopStore)

Where compose看起来像这样(来自redux):

export default function compose(...funcs: Function[]) {
if (funcs.length === 0) {
// infer the argument type so it is usable in inference down the line
return <T>(arg: T) => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce(
(a, b) =>
(...args: any) =>
a(b(...args))
)
}