出口阵营组件有两个属性

Question

我使用MaterialUI，我有我的组件出口是这样的：

import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";

...

export default withStyles(styles)(Users);

现在，我开始使用i18next在我的项目中使用国际化，但它要我导出我的部分是这样的：

export default translate("common")(Users);

现在的问题是我怎么能同时满足？我如何与withStyles和translate出口？

任何帮助表示赞赏

Answer 1

无论这些代码块产生一个新的组件，因此你可以相互转化的结果。在一行中完成，它应该是这样的：

export default withStyles(styles)(translate("common")(Users));

或者，如果它可以更容易效仿，这分为两行。

const TranslatedUsers = translate("common")(Users);
export default withStyles(styles)(TranslatedUsers);

Answer 2

高阶分量的目的是提供一种用于组件被有效地构成的办法：

export default translate("common")(
  withStyles(styles)(Users)
);

它可与组合物帮手，例如平坦化recompose：

import { compose } from 'recompose'

export default compose(
  translate("common"),
  withStyles(styles)
)(Users);