标签: i18next

我们正在使用reacti18next 来翻译我们的应用程序语言。每个值都根据键显示。但是我们的应用程序中有一个配置是启用空白定位器。启用配置后，翻译将仅显示按键。

假设我们已经实现了翻译键，如下所示，它显示了键的值。现在我们需要显示键名称member-management.members.form.fields.name。我们怎样才能做到这一点？任何想法。

<Trans i18nKey="member-management.members.form.fields.name"/>

我正在异步加载一些资源包，并且我想在加载时刷新整个应用程序。我怎样才能做到这一点？

i18n.addResourceBundle(locale, ns, messages, true, true);

// app is not updated

更新：我可以使用该bindToStore: 'add'选项，但由于可以加载多个包，因此我想在所有内容加载完成之前阻止刷新。

所以，目前看来，打电话i18n.changeLanguage(lang);和bindToStore似乎是唯一的选择，

我试图通过单击按钮来更改项目中的默认区域设置。我不想通过推送子路径（例如fooo.com/fa.

这是我的next-i18next配置：

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fa'],
  },
};

这是我更改区域设置并使用它的简单代码：

const { t, i18n } = useTranslation('common');
   ///
<button onClick={() => i18n.changeLanguage('fa')}>
    Click to Change Language
</button>
<p>{t('title')}</p>

但它不起作用并卡在默认区域设置 EN 中。

我在下一个应用程序中使用 i18n，我需要在 getStaticProps 中访问当前页面语言，然后获取数据

export const getStaticProps = async () => {
  //need to get language here

  return {
    props: { data },
  };
};

const App = ({ data }) => {
  //my component where i can get language

  const { t, i18n } = useTranslation();

  const currentLang = i18n.language;
};

任何熟悉此错误的人：[带有错误消息的代码][1] [1]：https://i.stack.imgur.com/SbJvu.png

{t(`${settingType}` as const)}

错误：

No overload matches this call.
  Overload 1 of 2, '(key: TemplateStringsArray | Normalize<{

谢谢 ：）

我在我的 React js 应用程序中使用 i18next 进行翻译。我在 Header.jsx 文件中添加了所有页面通用的语言下拉列表。我正在我的页面quiz.jsx之一中根据当前语言获取数据。因此，在语言更改时应该再次调用 api。

问题解释

1. i18Next 函数的languageChanged()事件在语言下拉列表更改时多次调用。它应该只被调用一次。我不知道为什么这个函数被多次调用？

2. 我想仅在一个页面上实现i18Next 的languageChanged()事件，但目前它在每个页面上调用。所以 api 正在获取所有页面中的数据，这些数据对于该页面来说是不必要的数据。

i18Next 配置

语言.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import config from './config';
var resources = {};
//Dynamically reading languages from config file
config.supportedLanguages.forEach(element => {
  resources[element] = {
    translations: require('../locale/' + element + '.json')
  };
});
i18n.use(initReactI18next).init({
  fallbackLng: config.defaultLanguage,
  lng: config.defaultLanguage,
  resources,
  ns: ['translations'],
  defaultNS: 'translations',
  debug:true
});

i18n.languages = config.supportedLanguages;

export default i18n; …

我现在正在 vueJS 中做一个前端界面，并且目前正在使用 vuejs 3 和 i18n。i18n 的实现按正常方式工作得很好，但是当我想将它与组合 API 一起使用时，就会出现问题。

所以我做了什么。我的 main.js 看起来像这样：

const i18n = createI18n({
    messages: {
        en: en,
        fr: fr
    },
    fallbackLocale: 'en',
    locale: localStorage.Language || navigator.language.split('-')[0] || 'en',
})
const app = createApp(App)


app.use(router)
app.use(i18n)

app.mount('#app')

我在文档中看到要使用组合API，我必须添加legacy:false，所以我这样做了。然后我的 $t 就不再起作用了。我进一步查看文档并到达了我迷失的地方。文档说要使用这个：

const app = Vue.createApp({
  setup() {
    const { t } = VueI18n.useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
    return { t } // return render context that included `t`
  }
})

我的问题是我的 createApp …

由于上述问题，我的单元测试失败了。

//String.ts
import * as i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import BrowserLanguageDetector from 'i18next-browser-languagedetector'
import Backend from 'i18next-http-backend'
import languageMap from '@katal/localization/webpack-loader!'

i18n
  .use(initReactI18next)
  .use(BrowserLanguageDetector)
  .use(Backend)
  .init({
    fallbackLng: 'en-US',
    load: 'currentOnly',
    detection: {
      order: ['sessionStorage', 'localStorage', 'querystring', 'navigator'],
      lookupQuerystring: 'locale',
      lookupLocalStorage: 'locale',
      lookupSessionStorage: 'locale',
      caches: [],
    },
    backend: {
      loadPath: (localeList: string[]) => languageMap[localeList[0]],
    },
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
  })

我嘲笑这一点的方式是：

const React = require('react')
const reactI18next = require('react-i18next')



module.exports …

我有一个输入组件，用户应该用不同的语言输入文本。因此，当用户选择他想要使用的语言时，我希望将占位符翻译成不同的语言。我不想更改页面的活动语言。

有谁知道，如何手动从资源中获取翻译？

我没有使用任何工具来获取文本翻译。

我正在寻找类似的东西：

const [t, i18n] = useTranslation();
let translatedPlaceholder = t('Placeholder', 'de') // For translation to german 

我正在为我的React应用程序使用create-react-app，目前正在尝试找出翻译。

现在，我在每个语言环境中都有一个大的JSON文件，每个语言环境文件都包含所有组件的翻译-这并不理想，我希望每个组件都有单独的翻译文件。

因此，语言环境的结构将如下所示：ComponentA-语言环境-en.json-sk.json

ComponentB-语言环境-en.json-sk.json

实现此目标的最佳方法是什么？我应该使用哪些模块来实现这一目标？

我不想将这些语言环境文件包含到构建中，因为我们将支持10种语言，因此捆绑包的大小将太大。