使用 i18n 的 useTranslation 和 redux 的 connect HOCs 导出组件
Exporting component using i18n's useTranslation and redux's connect HOCs
我的应用使用了很长时间的 Redux,组件导出看起来像
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
我现在正在介绍 i18n 的翻译库,并且想使用 useTranslation
中包含的 HOC。
我尝试了几种不同的方法,发现 Redux
有一个 connect
功能,如果我理解正确的话,它应该结合 HOC,但是我无法让它工作。
export default connect(useTranslation(), connect(mapStateToProps, mapDispatchToProps))(MyComponent);
当我加载浏览器时显示:
Uncaught ReferenceError: process is not defined
我是不是漏掉了什么?
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);
我的应用使用了很长时间的 Redux,组件导出看起来像
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
我现在正在介绍 i18n 的翻译库,并且想使用 useTranslation
中包含的 HOC。
我尝试了几种不同的方法,发现 Redux
有一个 connect
功能,如果我理解正确的话,它应该结合 HOC,但是我无法让它工作。
export default connect(useTranslation(), connect(mapStateToProps, mapDispatchToProps))(MyComponent);
当我加载浏览器时显示:
Uncaught ReferenceError: process is not defined
我是不是漏掉了什么?
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);