導出具有兩個屬性的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);