问题标签 [react-i18next]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
4186 浏览

reactjs - 使用 i18next 创建反应应用程序 - 从 json 文件加载翻译

我试图用多种语言配置我的反应应用程序。为此,我使用 i18next 进行反应。我的配置文件是:

i18n.ts

我的翻译在(示例路径)public/locales/en_GB.json

在我的 index.tsx 中,我使用import './i18n';

我的实际组件的用法如下所示:

标签栏.tsx

我还可以看到翻译文件已成功加载,但 cra 向我抛出此错误:

0 投票
3 回答
9006 浏览

typescript - 在 JEST 中模拟 i18n 的 useTranslation 不起作用

我的反应组件使用来自 i18next 的翻译,我正在尝试使用 JEST 为它创建测试。但是,没有任何内容被翻译,我尝试在下面模拟 useTranslation 函数:

我究竟做错了什么?

0 投票
1 回答
3146 浏览

reactjs - 如何使用 react-i18next 翻译组件中的字符串?

我有一个下拉菜单,其中列出了选项 1、选项 2 和选项 3。我想使用 react-i18next 翻译这些选项。我是翻译和使用这个框架的新手。

下面是代码,

有人可以提供有关如何解决此问题的想法...或帮助我解决此问题。谢谢。

0 投票
0 回答
385 浏览

typescript - i18next-scanner 在使用 Typescript 反应本机项目时未拾取 this.props.t

我正在使用 Typescript 构建一个反应原生应用程序,并且我正在使用react-i18nexti18next进行翻译。这是我的i18next-scanner配置:

问题是扫描仪无法使用this.props.t. 如果我使用i18n.tand ,它会起作用i18next.t,但我们想坚持this.props.t从一开始就使用哪个。我们想要使用的一个原因this.props.t是因为它是唯一可以与storybook. 使用其他两个功能只是显示故事中的关键。

任何有关修复i18next-scanner配置(或其他)的建议,以使代码的扫描得到使用,this.props.t我们都非常感谢。提前致谢!

0 投票
2 回答
316 浏览

react-i18next - 使用 HOC 包装父级时反应子级

我正在使用 React 16.8.6,并且具有以下结构:

page.js

父组件.tsx

父容器.ts

我需要知道每个孩子MiddleComponent的元素类型内部(不是作为字符串,而是作为 React 元素,因为我将基于它创建一个新元素)(所以,在这种情况下我应该有ChildComponent),但是当我检查时有了铬,我所有的孩子都有一种I18nextWithTranslation类型......

知道如何解决这个问题吗?或者如果这可能是一个已知的错误?

如果我根本不使用任何 hoc,当我写child.type它时它会返回 me ChildComponent(props)。但是,当我使用 hocs 包装父级时,情况并非如此......

0 投票
2 回答
3816 浏览

react-i18next - 如何修复“TypeError:createContext 不是函数”

React-i18next createContext 不是函数

你好。我使用 react-i18next 进行故障排除以翻译我的应用程序,在 index.js 中导入 i18n.js 期间,我出现类型错误。我不是 ReactJs 专家,也没有成功解决这个问题,我需要帮助。谢谢

i18n.js:

控制台错误:

0 投票
2 回答
4172 浏览

reactjs - 我们如何使用 api 调用而不是在静态 json 中定义它们来加载翻译?如何在 React-i18next 中做到这一点?

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

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

0 投票
0 回答
162 浏览

javascript - React Native - 不变违规 - i18next 集成

我正在尝试创建一个react-native应用程序,我目前处于起点,我无法理解我遇到的问题。

我需要整合i18next翻译。我按照他们的分步教程做到了这一点

我有以下代码

应用程序.js

这里的问题是我得到一个Invariant Violation: Text strings must be rendered within a <Text> component错误

如果我更改MyComponent为以下应用程序有效

所以对我来说这里的问题似乎是useTranslation()钩子。

我在这里想念什么?

我错过namespaceuseTranslation()

我已经添加了它,useTranslations('translation')但我仍然有同样的问题

问题似乎与无法解析的翻译文件的路径有关

i18next::backendConnector: loading namespace translation for language en failed failed parsing /translations/en/translation.json to json

在 React 中,文件将通过public文件夹公开可用,在 React-Native 中应该如何使用它?我认为该应用程序无法访问该文件夹,该文件夹应该放在哪里?

LE2

并且translations文件夹放在项目的根目录下

0 投票
0 回答
1380 浏览

ajax - 当您因为使用库而无法控制 AJAX 调用时,如何为 React Suspense 组件添加最小延迟?

我将以下组件包装在一个组件中Suspense

MyComponentuses i18next,这会触发加载翻译的悬念。Eveything 工作,但微调器只显示一瞬间,然后它消失,因为 AJAX 请求i18next正在完成。

我可以告诉Suspense组件以某种方式显示微调器至少 2 秒吗?这将在视觉上改善用户体验。有这样的东西会很棒:

我无法控制i18nextAJAX,或者我认为可以,因为它是一个库。

是否有可能实现我想要的Suspense

0 投票
1 回答
242 浏览

reactjs - 如何根据由 react-helmet 动态更改的 html lang 使用大写

在我的应用程序中,我通过单击按钮来更改语言。现在我想根据该语言的大写规则更改一些单词并将其变为大写。我试图通过<html/>动态更改 lang 属性来做到这一点。我的语言选项是土耳其语和英语

要更改 html 标签,我使用react-helmet并翻译我使用react-i18next的单词。它似乎适用于某些代码,但对于某些单词,大写规则适用于以前的语言。

t 是 的翻译函数react-i18n。该函数检查 currentSelectedLanguage 的翻译 json 文件并将其值写入标签。

标题项text-transform:uppercase在其 css 类中。

在土耳其语中,有两种类型的字母:i -> İ 和 ı -> I。

当我选择english时,会发生,但不是写KIT,而是得到KİT。这是土耳其语的大写规则,而不是英语。

当我选择turkish时,发生但我得到KIT,但它应该是KİT,这也是英语的大写规则