使用 i18n 的 useTranslation 和 redux 的连接 HOC 导出组件

Question

我的应用程序已经使用Redux很长时间了，组件导出看起来像

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

我现在介绍i18n的翻译库，并希望使用useTranslation中包含的HOC。

我尝试了几种不同的方法，发现Redux有一个connect功能，如果我理解正确的话，它应该结合HOC，但我无法实现这一点。

export default connect(useTranslation(), connect(mapStateToProps, mapDispatchToProps))(MyComponent);

当我加载浏览器时，我显示：

未捕获引用错误：进程未定义

我是不是遗漏了什么？

Answer 1

useTranslation不是HOC，您需要withTranslation。看起来是这样的：

export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(MyComponent));

或者，由于订单无关紧要：

export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(MyComponent));

嵌套多个HOC可能很难读取，因此使用compose实用程序函数可能更容易。Redux甚至包括一个：

import { compose, connect } from 'redux';
//...
export default compose(
connect(mapStateToProps, mapDispatchToProps),
withTranslation()
)(MyComponent);