使用 create-react-app (react / router / redux / typescript) 的 i18n 的最佳选择

Question

我使用 create-react-app-ts 创建了一个新的 React 应用程序。添加 i18n 的最佳选择是什么？

我查看了 react-intl，但它看起来很重。然后我查看了 linguiJS，它承诺会使其更容易，但我找不到如何将它与 create-react-app 一起使用的示例。此外，我不确定在一个模块中同时包含格式（数字等）、复数和翻译是否是一个好主意...我更喜欢使用单独的库...

请分享您的想法。在 React 应用程序中获得 i18n 的最佳（最简单/最漂亮）方法是什么。

谢谢

Answer 1

使用 redux 只需使用两个提供程序（如果不使用没有提供程序的 react-i18next - 我更喜欢）：

export default function App({ store }) {
  return (
    <I18nextProvider i18n={i18n}>
      <Provider store={store}>
        <YourRootComponent />
      </Provider>
    </I18nextProvider>
  );
}

并在您的组件中编写 translate hoc 和 redux 连接：

export default compose(
  translate('namespace', { wait: true }),
  connect(mapStateToProps, mapDispatchToProps),
)(YourComponent);