导出具有两个属性的React组件

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);