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

Question

我已经尝试了所有方法来安装 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" 并且出现丢失密钥错误。

Answer 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

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

react-i18next setup fails with react-redux component

reactjs

react-i18next