[英]Export React component with two property
I'm using MaterialUI and I have to export my components like this: 我正在使用MaterialUI,必须像这样导出我的组件:
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
...
export default withStyles(styles)(Users);
Now I started to use i18next
to use internationalization in my project but it want me to export my component like this: 现在,我开始使用
i18next
在项目中使用国际化,但它希望我像这样导出我的组件:
export default translate("common")(Users);
The question is how can I satisfy both? 问题是我要如何满足这两个条件? How can I export with
withStyles
and translate
? 如何导出
withStyles
并进行translate
?
Any help is appreciated 任何帮助表示赞赏
Both of those pieces of code produce a new component, so you can feed the result of one into the other. 这两段代码都产生了一个新的组件,因此您可以将一个的结果反馈到另一个。 Done in one line, it would look like this:
一行完成,看起来像这样:
export default withStyles(styles)(translate("common")(Users));
Or if it makes it easier to follow, here it is split on two lines. 或者,如果它更易于遵循,可以将其分为两行。
const TranslatedUsers = translate("common")(Users);
export default withStyles(styles)(TranslatedUsers);
The purpose of higher-order components is to provide a way for components to be efficiently composed: 高阶组件的目的是为组件的有效组合提供一种方法:
export default translate("common")(
withStyles(styles)(Users)
);
It can be flattened with composition helpers, eg recompose
: 可以使用合成助手将其弄平,例如
recompose
:
import { compose } from 'recompose'
export default compose(
translate("common"),
withStyles(styles)
)(Users);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.