Экспортный компонент 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 translate("common")(
  withStyles(styles)(Users)
);

Он может быть сведен с помощью помощников композиции, например, recompose:

import { compose } from 'recompose'

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

Answer 2

Оба этих фрагмента кода создают новый компонент, поэтому вы можете передать результат одного в другой.Выполненный в одну строку, он будет выглядеть следующим образом:

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

Или, если вам будет легче следовать, здесь он разбит на две строки.

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