问题标签 [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 投票
1 回答
1771 浏览

reactjs - 如何使用 React、React Intl 和 Redux 翻译(i18n)错误消息?

我有一个performLogin动作,它触发一个 API 并尝试使用提供的凭据对用户进行身份验证。此 API 调用可能会导致错误。她是我的行动:

我的问题是,我怎样才能国际化Invalid email or password

我正在使用React Intl,所以我在组件中有 i18n 的基础架构。我的想法是定义一个错误类型,在操作中设置它,让登录组件或全局错误组件决定应该显示哪个错误。

React-Redux 的方法是什么?

0 投票
2 回答
2078 浏览

reactjs - 无法在 React 路由器中正确地为路径添加前缀

我正在创建多语言应用程序。我正在使用:React Intl;反应路由器(最新 v4);还原。
我的应用程序中的路径将取决于语言环境:

如果用户拥有locale = en-US并进入localhost:8080应用程序会将他重定向到 localhost:8080/en

如果用户拥有locale = uk并进入localhost:8080应用程序,则会向他显示与地址相对应的组件,localhost:8080/而无需更改位置路径名。

路由器.jsx

目前它没有按预期工作。
如果我no match输入localhost:8080/or ,我会进入路线配置localhost:8080/en

0 投票
1 回答
546 浏览

javascript - 将语言作为动态属性从父组件传递给 React 中的所有后代

我正在创建多语言应用程序。所以我想将语言属性传播给所有后代。因此,我可以为我的应用程序中的所有链接和路由添加语言前缀,我知道两种方法:

  1. 使用上下文,但不建议使用它,因为它是实验性的。
  2. 使用 redux 存储,但在这种情况下,我需要连接每个要存储的组件。

所以我想知道哪种情况更可取,或者如果没有一种情况,那么可能还有另一种选择。

PS
3. 作为一个属性从组件传递给所有级别的每个子级,如下所示:

0 投票
1 回答
903 浏览

reactjs - 在 React Intl 中使用静态生成消息

我有一个包含页面内容的对象,我导入它并尝试像使用任何对象变量一样使用它:

但是,我得到React Intl] Messages must be statically evaluate-able for extraction.. 我用谷歌搜索了很多,但没有找到解决方案。我babel-plugin-react-intl用来生成语言环境文件,一个贡献者说Babel 只能解析简单的静态消息

很难相信没有办法能够从另一个文件导入内容并进行翻译。必须有一种方法,我无法提出解决方案,我们将不胜感激。

0 投票
1 回答
232 浏览

reactjs - 使用 injectIntl​​() 包装 React 组件后,属性类型检查丢失

假设我有一个组件Card,它看起来像这样:

现在由于道具的原因,我必须将此组件与属性一起使用title

我需要用injectIntl()from包装这个组件react-intl,所以intl上下文被注入了。我这样做:

现在我可以使用Card没有属性的组件title

这对于打字稿编译器来说似乎很好。也没有运行时错误。我预计编译器会抛出这样的错误:

这种行为从何而来?为什么会这样?如何解决这个问题呢?

先感谢您!

0 投票
1 回答
2035 浏览

react-intl - 使用命名格式在反应国际

我在使用时尝试使用命名格式react-intl,但我无法让它工作。根据我的研究,我认为这应该是一个最小的例子:

但是,在运行时,一个错误说:[React Intl] No date format named: year-only

我究竟做错了什么?

0 投票
1 回答
4358 浏览

reactjs - '_isMockFunction' 未定义

我正在尝试测试一个反应组件方法。但我收到以下错误。请帮忙。

TypeError:无法读取未定义的属性“_isMockFunction”

0 投票
1 回答
171 浏览

reactjs - 在 redux -form 的文本字段中验证 prop

我挣扎了几个小时来处理一项任务。我有一个来自材料 ui 的 redux 表单文本字段,我像这样使用它:

validate 属性将两个函数作为参数:

我使用 intl 因为我的信息应该被翻译。但是一个错误显示intl.formatted message is not a function。因此我写道: validate={() => [requireValidator(value, intl), onlyNumeric(value, int)]}。错误未显示,但验证无法正常工作。有任何想法吗??

0 投票
1 回答
438 浏览

javascript - React-Intl:从 api 响应加载新字符串

我有一个需要来自后端的字符串的组件。我目前.po从服务器请求文件,将其转换为.json并将其返回给我的 React 组件。然后我希望能够显示这些字符串,同时替换字符串中的正确值,即

dynamicId 是从单独的 api 调用以及 dynamicVals 中提取的。

我的问题是这些字符串不像我所有的其他应用程序字符串那样捆绑在一起,所以react-intl不知道它们。如何将这些字符串添加到库客户端/异步?我尝试使用defineMessagesand addLocaleData,但我要么做错了事,要么没有使用正确的 api 方法。是否addLocaleData提供将字符串添加到库的方法?这可能吗?

总之:

我怎样才能收到

从 api 并使用以下方法显示它:

我在这里先向您的帮助表示感谢。

0 投票
1 回答
2402 浏览

reactjs - react Intl - 如何从 formattedMessage 中获取值

我有一个需要数字的组件。 <ClickableNumber num={num} />

我从带有 FormattedMessage 的语言包中获取此号码
<ClickableNumber num={<FormattedMessage id="native_number" />} />

num当我在里面进行控制台登录时,ClickableNumber它是一个对象。

如何从中获取值的字符串或数字版本<FormattedMessage id="native_number" />

如果我使用了,我可以获得该值,intl.formatMessage({ id: 'native_number' })但我正在尝试重用ClickableNumber并且不想将使用此组件的每个组件包装在injectIntl