React Native中如何同时导出connect与translate包装的组件？

嘿，我刚好在项目里处理过一模一样的场景，这就给你分享两种靠谱的实现方式，保证Redux的connect和i18n的translate都能正常生效：

方法一：直接链式包装导出 #

你可以把两个高阶组件（HOC）直接链式调用，把原始组件依次传给它们就行。其实调用顺序不影响最终效果，但我个人习惯先做国际化包装，再连接Redux，代码看起来更顺：

import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import EntryPage from './EntryPage'; // 你的原始页面组件

// 定义Redux的mapStateToProps
const mapStateToProps = (state) => {
  return {
    // 这里放你需要从Redux状态中获取的属性
    currentUser: state.auth.user,
    appTheme: state.settings.theme
  };
};

// 链式调用两个HOC，导出增强后的组件
export default connect(mapStateToProps)(translate()(EntryPage));

// 反过来顺序也完全没问题，效果一样
// export default translate()(connect(mapStateToProps)(EntryPage));

方法二：用Redux的compose工具组合HOC #

如果之后还要加其他高阶组件（比如路由权限、样式增强之类的），用Redux自带的compose函数会让代码更整洁，可读性更高：

import { connect, compose } from 'react-redux';
import { translate } from 'react-i18next';
import EntryPage from './EntryPage';

const mapStateToProps = (state) => {
  return {
    currentUser: state.auth.user,
    appTheme: state.settings.theme
  };
};

// 用compose把多个HOC组合成一个增强函数
const enhance = compose(
  connect(mapStateToProps),
  translate() // 注意这里要调用translate()生成对应的HOC
);

// 把原始组件传入增强函数，导出最终组件
export default enhance(EntryPage);

为什么之前的方法不行？ #

你之前尝试分别导出两个包装后的组件，本质上是生成了两个完全独立的组件实例，自然只有你使用的那个会生效。而上面两种方法都是把两个增强逻辑合并到同一个组件上，这样Redux的状态和i18n的翻译功能就能同时作用在你的页面上了。

另外如果你的translate需要指定命名空间或者其他配置，直接在translate('your-namespace')里传参数就行，完全不影响链式调用或者compose的使用~

内容的提问来源于stack exchange，提问作者Ali Zeynalov