问题标签 [react-intl]

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 投票
0 回答
1326 浏览

reactjs - react-intl 停止工作“缺少区域设置的区域设置数据”

我有过去 2 个月的代码,直到几天前一切正常,我删除了所有模块并再次安装了 npm。现在,当我在下拉列表中更改语言时,react-intl 开始抛出错误。在我的 App.js 中,我有这样的东西:

在我的语言组件中,下拉更改我正在更改语言环境。当我控制台记录 lc 并且在我得到正确的 lc 之前返回的消息和带有已翻译消息的数组时,会引发错误,正如您在 img 上看到的那样:在此处输入图像描述

我在项目中使用的版本是“2.0.0-beta-2”,但看起来它在没有更改版本号的情况下进行了更新。

有人知道发生了什么吗?谢谢

0 投票
1 回答
2144 浏览

javascript - React-Router 和 React-Intl:有没有更好的方法来动态加载翻译的路线?

我会在其路由更改时动态加载页面的翻译。我为每条路线使用 onEnter 完成了它。

有没有更好的方法来实现这一点?我可以避免对每条路由使用 onEnter 回调函数吗?

0 投票
2 回答
992 浏览

node.js - Node react-intl 中的本地日期

我正在尝试使用 react-intl 在 React App 上设置 i18n。该应用程序是通用渲染的(因此在使用节点的客户端和服务器上)。我所拥有的一个基本示例是这样的:

服务器渲染的格式化日期与客户端渲染的日期不同,导致反应校验和无效并丢弃服务器渲染。服务器正在发回日期的 en-US 区域设置,浏览器正在呈现 en-GB

我在服务器和浏览器中都尝试了这个小测试:

在浏览器中它记录:

“2016 年 4 月 13 日” “2016 年 4 月 13 日”

这是我所期望的,但在节点中我得到了

“2016 年 4 月 13 日” “2016 年 4 月 13 日”

这可能是为什么服务器呈现的反应代码版本与浏览器版本不同的原因?

我只是猜测这是问题所在。节点是 v5.4.1 版本

0 投票
1 回答
1451 浏览

javascript - react-intl 的 FormattedNumber 组件不起作用

我正在尝试使用库中的组件FormattedNumberreact-intl但无法使其工作。

这只会以我将它传递给组件的方式返回值,并用 span 包装,但它不会格式化数字。

我在控制台中收到错误:

[React Intl] 格式化数字错误。TypeError:必须在函数上调用绑定

FormattedMessage组件适用于我的所有翻译,语言环境设置为en-US,所以我不认为问题来自于IntlProvider或其他原因。

在此处输入图像描述

我正在使用最新版本的库,2.0.1

任何想法?

0 投票
7 回答
11334 浏览

reactjs - 在 Redux 中间件中使用 React-intl 翻译的消息

我在我的应用程序中支持多种语言并为此使用 React-intl。我有 Redux 中间件,我在其中调用服务器,如果出现错误,我想在 UI 上显示错误。

我知道我可以做类似的事情:

1) 使用消息键从中间件分派一个动作:

2) 在我的 React 组件中使用:

但是有没有办法用中间件已经翻译的消息来调度一个动作?

0 投票
2 回答
7162 浏览

reactjs - 如何将 react-intl 2 与 redux 一起使用?

如何在使用 react-intl 2.0 和 redux 的应用程序中使用 injectintl 和 connect。查看我的代码的最后两行并告诉我这样做的正确方法是什么。

0 投票
3 回答
7407 浏览

unit-testing - 用酶测试 react-intl 组件

我已经研究了 react-intl 的建议,但它没有留下任何关于酵素的明确文档。

这就是我一直在尝试编写测试的方式。

但我不断收到错误

不变违规:[React Intl] 找不到所需intl的对象。需要存在于组件祖先中。

我查看了他们的仓库,他们似乎已经使它与“react-addons-test-utils”一起工作。

难道我做错了什么?

0 投票
1 回答
15366 浏览

reactjs - 将 react-intl 对象注入到已安装的 Enzyme 组件中进行测试

编辑:解决了!向下滚动寻找答案


在我们的组件测试中,我们需要它们能够访问react-intl上下文。问题是我们在没有父包装器的情况下安装单个组件(使用 Enzyme's mount()) 。<IntlProvider />这可以通过将提供者包裹起来但随后root指向IntlProvider实例而不是指向来解决CustomComponent

使用React-Intl 进行测试:酶文档仍然是空的。

<自定义组件 />


标准测试用例(所需)(Enzyme + Mocha + Chai)

但是,由于我们的组件FormattedMessage用作库的一部分,因此react-intl在运行上述代码时会出现此错误:

Uncaught Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.


用它包裹起来IntlProvider

这提供CustomComponentintl它所要求的上下文。但是,当尝试执行以下测试断言时:

引发以下异常:

AssertionError: expected undefined to equal ''

这当然是因为它试图读取的状态IntlProvider而不是我们的CustomComponent.


尝试访问CustomComponent

我尝试了以下方法无济于事:


问题是:我们如何在安装CustomComponent上下文的intl同时仍然能够对我们的 执行“root”操作CustomComponent

0 投票
1 回答
6798 浏览

reactjs - 如何使用 defineMessages 方法定义本地化?

我想本地化我的组件。我使用 yahoo/react-intl 库。我定义了一些消息

我不知道如何为消息定义可本地化的文本,所以我收到了这个错误

使用示例

有谁知道如何定义本地化消息?使用 defineMessages 似乎无法做到这一点。提前致谢。

0 投票
2 回答
5407 浏览

react-intl - babel-plugin-react-intl:将字符串提取到单个文件中

目前在使用时babel-plugin-react-intl,为每个组件创建单独的 json,其中包含“id”、“description”和“defaultMessage”。我需要的是只创建一个json,它包含一个对象,所有的'id'作为'key','defaultMessage'作为'value'

现状:

ComponentA.json

ComponentB.json

我需要什么翻译。

final.json

有没有办法完成这个任务?可能是通过使用python脚本或任何东西。即从不同的json文件制作一个json文件。或者直接使用 babel-plugin-react-intl 制作单个 json 文件