标签: react-i18next

我需要使用ReactJS构建一个多语言应用程序.该应用程序需要不同语言的自定义词典以及日期/时间,数字和货币的自动格式.

从我所看到的有两个非常受欢迎的图书馆:

reac -intl和 react-i18next

一个人和另一个人之间的优势是什么？什么是最受支持和最受欢迎的？

支持多种语言的ReactJS应用程序的一般选择是什么？

我有一个名为 Translations.json 的静态文件，其中包含我的翻译：

{
  "common": {
    "greeting": "We will see you at NEW YORK in the morning!"
  }
}

在我的反应代码中，我一直在做一些事情：

<p>{translate('common.greeting')}</p>

但是，我希望“NEW YORK”这个词是粗体的。我一直在做一些研究，我发现该Trans组件可能就是我正在寻找的，但我没有运气。我打算将翻译分为 3 部分... greetingIntro、、grettingBold和grettingEnd...

有人能指出我正确的方向吗？

我react-i18next在我的应用程序中使用效果很好，但是当我针对我的组件运行单元测试时：

const OptionList = ({
  definition,
  name,
  status = EMutationStatus.IDLE,
  onChange = () => null,
  value = [],
}: IOptionListProps): React.ReactElement => {
  const { t } = useTranslation();
  const { options } = definition;
  return (
    <Select
      name={name}
      data-testid="optionList"
      id={name}
      placeholder={t('COMMON.PLEASE_SELECT')}
      onChange={e => onChange(e.currentTarget.value)}
      defaultValue={value[0]}
      disabled={status === EMutationStatus.LOADING}
    >
      {options.map((option: string): React.ReactElement => {
        return (
          <option key={option} value={option}>
            {option}
          </option>
        );
      })}
    </Select>
  );
};

运行单元测试套件时它会抛出以下警告：

react-i18next:: You will need to pass in an i18next …

I would like to use react-i18next with my react-redux connected component and am not sure how to go about it.

I've simplified my code to show an example of a connected component:

import React from 'react';
import {connect} from 'react-redux';
import {userSelectors} from "./userSelectors";

interface IConnectedProps {
    activeUserName: string | undefined;
}
export class LandingPageComponent extends React.Component<IConnectedProps> {
    public render(): JSX.Element {
        return (
            <React.Suspense fallback={<Spinner/>}>
                <React.Fragment>
                    <div>
                    ... a bunch of controls using translated text
                    </div>
                    <div>{activeUserName}</div>
                </React.Fragment>
            </React.Suspense> …

我在一个小型网站上使用 ReactJS。我决定使用 i18next 进行国际化并且它有效 - 除非我使用嵌套引用作为翻译键。

在下面的示例中，显示了 intro1 和 intro2 键，但没有找到welcome.headtitle（控制台中的错误“missingKey”）。

应用程序.js：

...
 <p><Trans i18nKey='intro1'/></p>
 <p><Trans i18nKey='intro2'/></p>
 <p><Trans i18nKey='welcome.headtitle'/></p>
...

翻译.json：

{
"welcome": {
    "headtitle": ...
    ...
  },
  "intro1": ...,
  "intro2": ...,
}

我知道 i18next 允许嵌套的 JSON 翻译对象。我究竟做错了什么？我检查了文档和示例，没有发现任何错误。

我在用react-i18next。有时 init 函数组件面临 React 问题。知道是什么原因造成的吗？

我的配置

import i18n from "i18next";
import resources from "./locales";
import { initReactI18next } from "react-i18next";

const options = {
  debug: false,
  lng: "en",
  resources: resources,
  fallbacking: "en",
};

i18n.use(initReactI18next).init(options);

export default i18n;

我的版本

"react": "^16.13.1",
"react-i18next": "^11.7.2",

有没有办法检查反应应用程序上是否存在区域设置？就像布尔值 true/false

在 React 应用程序中使用国际化时，需要使用 api 调用按需加载语言翻译文件，而不是预先定义它们。如何使用 React-i18next 来实现这一点？

尝试使用 React-i18next 从静态预定义文件中选取正常翻译。尝试使用 xhr-backend 但无法找到任何示例来实现按需加载翻译相关数据的要求。

我有一个用 React 编写的项目并支持 hooks。我正在尝试使用react-i18next 来支持翻译。一切正常，因为我遵循了文档。

然而，当我想t()在助手/非组件 .js 文件上使用该函数时，我偶然发现了一些问题。然后，我通过直接从 init 文件导入 i18n 来解决这个问题，./i18n.ts如下所示

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next) 
  .init({
    resources,

    ns: [
      'common',
      'dashboard',
      'landing'
    ],
    defaultNS: 'common',

    fallbackLng: 'en',
    supportedLngs: ['de', 'en'],
    interpolation: {
      escapeValue: false, 
    },
  });

export default i18n;

我意识到我根本不必使用钩子，因为我可以在代码中的任何地方使用它，甚至在我的功能组件文件上

import i18n from "@root/i18n"

...
i18n.t('namespace:path')

我想知道如果你可以像这样导入它，为什么建议使用useTranslation钩子/ HOC？withTranslation我读到useTranslation应用悬念，但似乎initReactI18next默认情况下也应用了悬念。

我很好奇不使用推荐的钩子/HOC 是否有任何副作用？

是否可以在react-i18next字典中键入检查现有键？因此，如果密钥不存在，TS 会在编译时警告您。

例子。

假设，我们有这本字典：

{
  "footer": {
    "copyright": "Some copyrights"
  },

  "header": {
    "logo": "Logo",
    "link": "Link",
  },
}

如果我提供不存在的密钥，TS 应该会爆炸：

const { t } = useTranslation();

<span> { t('footer.copyright') } </span> // this is OK, because footer.copyright exists
<span> { t('footer.logo') } </span> // TS BOOM!! there is no footer.logo in dictionary

这种技术的正确名称是什么？我很确定我不是唯一一个要求这种行为的人。

它是react-i18next开箱即用的吗？是否有 APIreact-i18next以某种方式扩展库以启用它？我想避免创建包装函数。