处理组件级别的React翻译

时间:2017-10-06 08:41:42

标签: reactjs internationalization i18next

我想要实现的是我可以为所有组件本身提供翻译。当我安装这些组件时,它们应该自行渲染。我想要实现的另一件事是我的项目可以推翻组件级别的翻译。如果有人认为那里的翻译不是我们想要的,那就是这种情况。

我在我的组件中所做的是加载i18n

import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';
import Cache from 'i18next-localstorage-cache';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(XHR)
  .use(Cache)
  .use(LanguageDetector)
  .init({
    backend: {
      loadPath: '../dist/locales/{{lng}}/{{ns}}.json',
    },
    fallbackLng: 'en',
    react: {
      wait: true
    },
    ns: ['authentication'],
    defaultNS: 'authentication',
    debug: false,
    cache: {
      enabled: true
    },
    interpolation: {
      escapeValue: false, // not needed for react!!
      formatSeparator: ',',
      format: function(value, format) {
        if (format === 'uppercase') return value.toUpperCase();
        return value;
      }
    }
  });

export default i18n;

这在我的故事书中工作得很好但是当我在我的主项目中加载它时,它正在使用我的构建根目录中的../,这实际上不是组件本身,而是我的主要实现项目。

我如何解决它,我怎样才能确保我甚至可以解决这个问题?

更新: 下面列出了当前文件夹结构,如下面问题所示:

#Component
dist
--.gitkeep
--locales
--commonjs
--es
src
--actions
----index.js
--components
----compname
------index.js
--reducers
----foo.js
--i18n.js
--index.js
test
.babelrc
package.json
Jenkinsfile

#Project
react
--assets
----css
------app.scss
--dist
----.gitkeep
--src
----index.js
----store.js
webpack.config.js

由于

0 个答案:

没有答案