我有一个 nextjs 应用程序，我想使用 i18next 和 next-i18next （https://github.com/isaachinman/next-i18next）扩展它。

默认配置是在 下查找 json 文件./public/locales/{lng}/{ns}.json，其中 lng 是语言，ns 是命名空间。

然而，我的要求是，这应该从 api 端点提供。我正在努力寻找正确的配置，因为它next-i18next现在忽略我的设置，并且没有向我的后端发出任何 xhr 请求。

下一个-i18next.config.js：

const HttpApi = require('i18next-http-backend')

module.exports = {
    i18n: {
        defaultLocale: 'de',
        locales: ['en', 'de'],
    },
    backend: {
        referenceLng: 'de',
        loadPath: `https://localhost:5001/locales/de/common`,
        parse: (data) => {
            console.log(data)
            return data 
        }
    },
    debug: true,
    ns: ['common', 'footer', 'second-page'], // the namespaces needs to be listed here, to make sure they got preloaded
    serializeConfig: false, // because …

我正在尝试使用react-i18next使I18N工作。我正在尽可能接近此处提供的步骤。我已经尝试了几个小时，但仍在使用Google搜索，但还没有发现我在做什么错。任何帮助表示赞赏。

我收到此错误堆栈跟踪：

    Exception has occurred: Error
Error: I18nextWithTranslation suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
    in I18nextWithTranslation (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter
    in CookiesProvider
    at throwException (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:45969:13)
    at renderRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47147:11)
    at performWorkOnRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48000:7)
    at performWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47912:7)
    at performSyncWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47886:3)
    at requestWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47755:5)
    at scheduleWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47569:5)
    at scheduleRootUpdate (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48230:3)
    at updateContainerAtExpirationTime (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48258:10) …

的package.json

"moduleNameMapper": {
  "i18next": "<rootDir>/__mocks__/i18nextMock.js"
}

i18n.js

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({
    fallbackLng: 'en',
    // wait: true, // globally set to wait for loaded translations in translate hoc
    lowerCaseLng: true,
    load: 'languageOnly',
    // have a common namespace used around the full app
    ns: ['common'],
    defaultNS: 'common',
    debug: true,

    // cache: {
    //   enabled: true
    // },

    interpolation: {
      escapeValue: false, // not …

我正在使用 React-i18next 就像示例一样

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  return (
    <Suspense fallback="loading">
      <MyComponent />
   </Suspense>
   );
}

但是 Suspense 正在破坏我的其他组件之一，即 react-masonry-layout。是否可以不使用 Suspense？

谢谢。

我正在将 React 与 react-i18next 一起使用

我的 index.tsx 文件包含一些组件，我可以在那里使用翻译功能

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom';
import * as utils from './Utils';
import './i18n';
import { useTranslation, withTranslation, Trans } from 'react-i18next';

...
  const { t, i18n } = useTranslation();
  //I can use the translate function here
  t("title");
  //call a util function
  utils.helperFunction(...);
...

这里一切正常。我现在在一个附加文件中创建了一些辅助函数

...
import { useTranslation, withTranslation, Trans } from 'react-i18next';
...
export function helperFunction(props: any){
   //do stuff

   //now I need some …

我使用react-i18next和i18next来本地化一个应用程序。我希望能够在设置中手动更改语言并保留该更改。问题是我不知道如何在i18n配置文件中使用 redux，因为 redux 是异步的，我也检查了文档中的一些内置存储选项，react-i18next但没有成功。

这是i18n配置文件：

'use strict';

import i18n from 'i18next';
import {reactI18nextModule, initReactI18next} from 'react-i18next';
import DeviceInfo from 'react-native-device-info';

import translationFR from '../translation/fr/translation.json';
import translationEN from '../translation/en/translation.json';
import translationAR from '../translation/ar/translation.json';

async function getAppLang() {
  const unsubscribe = store.subscribe(() => true);
  const appLang = await store.getState().appLang;
  await unsubscribe();
  return appLang;
}

let locale = DeviceInfo.getDeviceLocale().substring(0, 2);
if (locale != 'fr' && locale != 'ar') {
  locale = 'en';
} …

我想知道是否有人知道检查未使用翻译的好方法/工具/包

我见过它用于 Rails，例如 i18n-tasks，但没有用于 React

我目前正在使用react-i18next，但它可以是任何可以查看您的翻译文件的内容

预先非常感谢

我有几个关于使用 i18n 时的最佳实践和工作流程的问题\n我目前正在使用react-i18next\n我直接使用组件中的默认值定义键，然后使用提取它们babel-plugin-i18next-extract

例子

    <I18nText\n        ns="meeting"\n        i18nKey="meeting-invitation.videoConferenceLink"\n        defaults="You can join the video conference call for {{meeting.name}} when it starts via: <br /> <0>{{meeting.videoConference.link}}</0>"\n        components={[\n            <a\n                href={meeting.videoConference.link}\n                target="_blank"\n                rel="noopener noreferrer"\n            >\n                {meeting.videoConference.link}\n            </a>,\n        ]}\n        values={{ meeting }}\n    />\n

注： I18nText 是自定义组件包装Trans组件

问题：

1\xef\xb8\x8f\xe2\x83\xa3我是否应该将在应用程序中经常使用的关键字放入自己的密钥中？如果是这样，我如何同时处理复数、格式化和使用上下文？

假设我在整个应用程序中使用关键字meeting，action并且我有这样的句子

0 meetings, 0 actions         => You have no scheduled meetings and no actions deadlines so far to prepare for.\n1 meeting, …

我在 React Native 应用程序中使用 i18next 和 react-i18next ，更具体地说是输入验证。我试图将 t() 作为 no 组件中的参数传递，但收到错误“TypeError: n 不是函数。（在 'n('errorMessages.emailNoMatch')' 中，'n' 未定义） ”。非常感谢任何建议，因为我对编码相对较新，并且我已经为此问题搜索了几天。

这是 i18n.js 代码：

import i18next from 'i18next';
import common_de from './translations/de/common.json';
import common_en from './translations/en/common.json';
import i18n from 'i18n-js';
import * as Localization from 'expo-localization';
// Set up translations
i18next.init({
  interpolation: { escapeValue: false }, // React already does escaping
  lng: 'en', // language to use
  resources: {
    de: {
      common: common_de, // 'common' is our custom namespace
    },
    en: {
      common: …

我有用于输入的自定义组件，formik并且在其内部渲染错误标签（如果存在）。
如果我像这样打印它：{errors[field.name]}它可以工作
但是 {t(errors[field.name]?.toLocaleString())} 这不行。

import { FieldProps, FormikErrors } from "formik";
import { useTranslation } from "react-i18next";

const InputField: React.FC<InputFieldProps & FieldProps> = ({
  field,
  form: { touched, errors },
  type,
  label,
  ...props
}) => {
  const { t } = useTranslation();
  
  return (
    <div>
      <label
        htmlFor={field.name}>
        {label}
      </label>
      <input
        type={type}
        {...field}
        {...props}/>
      {touched[field.name] && errors[field.name] && (
        <div>
          <p>
            {errors[field.name]}
            {t(errors[field.name])} <---- this does not work
          </p>
        </div>
      )}
    </div>
  );
};

export default …