导出具有两个属性的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);