如何将 Material UI 的 HOC 组合在一起

【问题标题】：How to combine Material UI's HOC together如何将 Material UI 的 HOC 组合在一起
【发布时间】：2021-10-06 21:43:50
【问题描述】：

目前正在尝试组合多个材质 UI 组件以便它们呈现。目前，我有：

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

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

【问题讨论】：

标签： javascript css reactjs redux material-ui

【解决方案1】：

React specifically recommends 一个 compose 实用函数，适用于这种情况：

compose 实用程序功能由许多第三方库提供，包括 lodash（作为 lodash.flowRight）、Redux 和 Ramda。

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

compose 看起来 like this（来自 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))
  )
}

【讨论】：