react-i18next 设置因 react-redux 组件而失败答案

【问题标题】：react-i18next setup fails with react-redux componentreact-i18next 设置因 react-redux 组件而失败
【发布时间】：2019-11-05 21:30:47
【问题描述】：

我已经尝试了所有方法来载入 react-i18next 、 react-redux 和 typescript 应用程序。

下面是我的 index.js 文件：

 import * as enTranslations from "./assets/locales/en";
 import * as frTranslations from "./assets/locales/fr";
 const resources = {
 en: { messages: enTranslations }
 };

  i18next
 .use(initReactI18next)
 .init({
  resources,
  fallbackLng: "en",
  debug: true,

 // have a common namespace used around the full app
 ns: ["translations"],
 defaultNS: "translations",
 namespaceSeparator: '.',
 keySeparator: false, // we use content as keys
 interpolation: {
   escapeValue: false
 },
 lng: "en",

 }).then(() => {
 ReactDOM.render(
  <I18nextProvider i18n={i18next}>
    <Provider store={store}>
      <CookiesProvider>
        <App />
      </CookiesProvider>
    </Provider>
  </I18nextProvider>,
  document.getElementById('root')
 )
});

我的 app.js 代码：

 export default compose(withTranslation("translations"), connect(
 mapStateToProps,
 mapDispatchToProps
 ))(App);

我的组件渲染方法和导出代码：

export default compose(
withTranslation('translations'),
connect(mapStateToProps, mapDispatchToProps)
 )(UserComponent);

渲染方法：

render() {
const { t } = this.props;
return (
    <h1>{CLIENTS_HEADER_TITLE} {t('title')}</h1>
);

但我总是看到打印的键而不是键值。我没有找到任何使用 react-redux 的示例。

我正在使用“react-i18next”：“^11.0.1”，但出现缺少密钥错误。

【问题讨论】：

您使用的是什么版本？控制台返回什么错误？

标签： reactjs react-i18next

【解决方案1】：

以下代码更改使其现在可以工作。

我的 app.js 代码：

 export default compose(withTranslation(), connect(
 mapStateToProps,
 mapDispatchToProps
 ))(App);

我的组件导出代码：

export default compose(
withTranslation(),
connect(mapStateToProps, mapDispatchToProps)
 )(UserComponent);

将 init 移至文件 i18n.js：

   import enTranslations from "./assets/locales/en";

    const resources = {
      en: {
        translation: {
          "title": "Welcome  {{name}}"
        }
      }
    };

    i18n
      .use(initReactI18next)
      .init({
        resources,
        lng: "en",
        keySeparator: "false",
        debug: true,
        interpolation: {
          escapeValue: false
        },
        useDataAttrOptions: true
      });

    export default i18n;

调试控制台输出帮助我解决了问题。

 //import enTranslations from '....'
 {title: "Welcome  {{name}}", intro: "To get started and save to reload."}

 //import * as enTranslations from '....'
 Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 
 "Module"}
  default: {title: "Welcome  {{name}}", intro: "To get started and save to 
  reload."}
  Symbol(Symbol.toStringTag): "Module"
 __esModule: true

【讨论】：