标签: react-i18next

我正在使用react，i18next和react-i18next。我想在文本中间插入一些带有HTML链接的可翻译文本，以进行插值，例如：

This is my text with <a href="{{link}}">a beautiful link</a> in the middle of the text

下面的解决方案有效，但是问题是我需要在react中插入链接，以便不能将其硬编码在标签文件中：

"my-label": "This is my text with <a href=\"http://google.com\">a beautiful link</a> in the middle of the text"

[...]

<Interpolate i18nKey="my-label" useDangerouslySetInnerHTML />

看来这要好得多：

"my-label": "This is my text with {{link}} in the middle of the text",
"link" "a beautiful link"

[...]

const { url } = props;
const link = <a href={url}>{t('link')}</a>

<Interpolate i18nKey="my-label" link={link} />

可能是解决方案，但是该应用程序已翻译成多种语言，而且翻译质量确实很重要，因此我更愿意将整个文本放在同一行中，以供翻译人员使用（这对于具有情况的语言尤其重要）。

有什么办法可以使像这样的东西工作（或者有什么办法可以完全不同地解决它）？

"my-label": "This …

我对复杂反应应用的多语言支持有疑问.所有示例和文档都基于没有嵌套/子组件的"扁平"应用程序.

如何处理嵌套的数据如下:

<i18n>
    <App>
        translate('base')(
          <Base>
              <Child1 />
              <Child2 />
              {t('Hello')}
          </Base>
        )
    </App>
</i18n>

我应该用translateHOC 包装每个儿童成分吗？或者还有其他方法可以将翻译功能传递给子组件？

我是 i18next 的新手，正在尝试本地化/翻译网站。一切都适用于组件内部的翻译，但在外部（意味着带有 i18n.t() 的 json 文件它不会检索所需的信息，而是显示默认值。

我正在使用 create-react-app 并且它是文件夹引用的默认设置，也许这​​是关键问题，但我不知道为什么以及要更改什么。

import i18n from '../../i18n';


const navigation = [
    {
        'id'      : 'dashboard',
        'title'   : i18n.t('analytics.title', 'NOT FOUND'),
        'type'    : 'group',
        'icon'    : 'apps',

    }
  ]

export default navigation;

这是 i18n.js 文件的设置：

import i18n from "i18next";
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';
import detector from "i18next-browser-languagedetector";

i18n

  .use(detector)
  .use(Backend)
  .use(initReactI18next)
  .init({
    lng: localStorage.getItem('language') || 'en',
    backend: {
      /* translation file path */
      loadPath: '/assets/i18n/{{ns}}/{{lng}}.json'
    },
    fallbackLng: ['en', …

我遵循了react-i18next文档并将我的React应用程序国际化。

我使用useTranslation钩子，它给了我“t”对象。现在一切都很好很顺利，但是我有一些位于组件树之外的非 Hook 实用函数。

如何访问那里的翻译对象？

我正在尝试在我的 Gatsby 项目中设置 i18n。

我一直在逐步遵循本教程：

https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/

首先我下载所需的包：

npm i -S i18next i18next-xhr-backend i18next-browser-languagedetector react-i18next

然后我设置了 i18n 组件

import i18n from "i18next"
import Backend from "i18next-xhr-backend"
import LanguageDetector from "i18next-browser-languagedetector"
import { reactI18nextModule } from "react-i18next"

i18n
.use(Backend)
.use(LanguageDetector)
.use(reactI18nextModule)
.init({
    fallbackLng: "en",

    // have a common namespace used around the full app
    ns: ["translations"],
    defaultNS: "translations",

    debug: true,

    interpolation: {
    escapeValue: false, // not needed for react!!
    },

    react: {
    wait: true,
    },
})

export default i18n

将其导入到我的布局组件中：

import React …

我目前在网站的本地化过程中遇到了障碍。使用 i18next，我们的所有路由都会被翻译，并且默认语言会从 URL 中删除区域设置路径。

换句话说：
/accueil -> /en/home
/produits -> /en/products
等等...

我的问题是，当我更改语言时，网址不跟随（这是预期的，因为 i18next 不直接与反应路由器对话）。

i18下一个配置：

i18n
  .use(detector)
  .use(initReactI18next)
  .init({
    whitelist: ['fr', 'en'],
    fallbackLng: 'fr',
    defaultNS: 'common',

    detection: {
      lookupFromPathIndex: 0,
      checkWhitelist: true
    },

    interpolation: {
      escapeValue: false
    },

    resources: {
      en: {
        routes: enRoutes,
        [...]
      },
      fr: {
        routes: frRoutes,
        [...]
      }
    }
  });

fr/routes.json：

{
  "home": "/accueil",
  "products": "/produits",
  [...]
}

en/routes.json：

{
  "home": "/en/home",
  "products": "en/products",
  [...]
}

app.jsx 中的路由器部分：

<Router forceRefresh>
  <Switch>
    <Route path={`/:locale(en|fr)?${t('routes:home')}`} component={HomeComponent} /> …

我需要在我的中间件（import { Middleware } from 'redux'）逻辑中进行翻译，但我不能使用useTranslation钩子（import { useTranslation } from 'react-i18next'）。您如何标准解决这种情况？

错误信息：

React Hook "useTranslation" is called in function "myFunction: Middleware<{}, RootStateType>" which is neither a React function component or a custom React Hook function.\n

我的代码（缩短）：

import PushNotificationIOS from '@react-native-community/push-notification-ios';\nimport { Middleware } from 'redux';\nimport { getType } from 'typesafe-actions';\n\nconst scheduleNotificationSettings = (notification: NotificationT): void => {\n PushNotificationIOS.scheduleLocalNotification({\n        fireDate: notification.startDate,\n        alertTitle: TRANSLATE_SOMEHOW(notification.titleKey),<--- ! HERE ! \xc2\xaf\\_(\xe2\x80\xaf\xe2\x9d\x9b\xe2\x80\xaf\xcd\x9c\xca\x96 \xef\xb8\xa1\xe2\x9d\x9b)_/\xc2\xaf\n        alertBody: TRANSLATE_SOMEHOW(notification.bodyKey),  <--- …

我正在设置react-i18n-next 钩子来翻译我的应用程序，我按照react-i18n-next使用的示例进行操作，但它抛出如下错误：

i18next::translator: missingKey
en-US
translation

应用程序.js

import React, { Component, Suspense } from "react";
import { useTranslation, withTranslation, Trans } from "react-i18next";

// use hoc for class based components
class LegacyWelcomeClass extends Component {
  render() {
    const { t } = this.props;
    return <h2>{t("title")}</h2>;
  }
}
const Welcome = withTranslation()(LegacyWelcomeClass);

// Component using the Trans component
function MyComponent() {
  return <Trans i18nKey="description.part1" />;
}

// page uses the hook
function Page() {
  const { t, i18n } = …

我正在编写故事书，并使用next-i18next. 这就是我的设置方式：

// .storybook/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  fallbackLng: 'de',
  debug: true,
});

export default i18n;

// .storybook/preview.js
import { StoreMall } from '../components/layouts/StoreMall';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import { ThemeProvider } from '@material-ui/core/styles';
import { jamesTheme } from '../components/colors';
import { themes } from '@storybook/theming';
import CssBaseline from '@material-ui/core/CssBaseline';

export const parameters = {
  // ...
};

export const decorators = [
  (Story) => …

我试图为 Redux Action 函数实现 i18n 本地化，但我不断收到不同的钩子错误。当我以这种方式实现 i18n 时，我收到错误。

第 428:17 行：在函数“sendDataRequest”中调用 React Hook“useTranslation”，该函数既不是 React 函数组件，也不是自定义 React Hook 函数。

import { useTranslation } from "react-i18next";

export const sendDataRequest = (requestId) => {
  const { t } = useTranslation();
  return async (dispatch) => {
    try {
      dispatch(sendDataRequest());
      await dataAPI.sendDataRequest({ requestId });
      notification.success({
        message: t('infoPage.requestSentSuccessfully'),      
     });
      dispatch(sendDataSuccess());
    } catch (error) {
      dispatch(sendDataFailure());
      console.error(error);
    }
  }
}

然后我移动了const { t } = useTranslation(); return 语句内部。但后来我收到另一个错误 看来我在这里显然用错了。但我找不到任何有关在 Actions 中使用 i18n 的示例。有谁知道是否可以在 Actions 中使用 i18b？