标签: react-intl

我已经Redux在我的React应用程序中实现了,到目前为止,这工作得很好,但我有一个小问题.

我的导航栏中有一个选项可以更改locale,存储在redux's state.当我改变它时,我希望每个组件都能重新发布以改变转换.要做到这一点,我必须指定

locale: state.locale

在mapStateToProps功能...这导致了很多代码重复.

有没有一种方法隐含传递现场为每个组件的道具connect与ED react-redux？

提前致谢!

所以我的 index.js 有这样的东西：

import trFi from './translations/fi_FI.json';
import trSv from './translations/sv_SE.json';

ReactDOM.render(
  <IntlProvider
    locale={my_locale}
    messages={{ fi: trFi, sv: trSv }[my_locale]}
  >
      <Root />
  </IntlProvider>
);

并且Root有多个子组件等等。现在我怎样才能在这些子组件中获得所提供的locale和messages？我知道我可以将它们作为道具传递给Root，它再次将它们传递下去，但是我的树相当深，维持这个很麻烦。

是否可以访问它locale并直接messages传递给IntlProvider子组件？

我一直在用Jest努力模拟React-Intl库，因为在运行测试时遇到此错误：

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

该库的文档说，我们必须在根项目中创建一个名为的文件夹__Mocks__，然后添加此文件：

// ./__mocks__/react-intl.js
import React from 'react';
const Intl = require.requireActual('react-intl');

// Here goes intl context injected into component, feel free to extend
const intl = {
  formatMessage: ({defaultMessage}) => defaultMessage
};

Intl.injectIntl = (Node) => (props) => <Node {...props} intl={intl}/>;

module.exports = Intl;

但是什么也没发生。

我正在尝试为我的 React 应用程序找到最佳的翻译概念。

我有一个用于翻译的高阶组件，并通过以下方式使用它：

export default translate('MyComponent')(MyComponent);

在一个组件中，我拥有 props 可用的所有文本 - 它对我来说很好用。

但是，我有很多带有常量的纯 javascript 文件，并且还需要在那里进行翻译。例如，有带有错误消息的验证模式或带有选择元素的常量，例如：

export default [
    {
        value: 'aaa',
        label: 'bbb', // want to translate this label
    }
];

在 React 应用程序中翻译纯 js 文件的最佳方法是什么？

我对 yahoo/react-intl 有一个问题，我想以字符串类型制作消息，但是当我使用 FormattedMessage 时，它​​给了我用 span 包裹的消息，这并不酷。我试过 formatMessage ，但也不起作用。我非常感谢任何帮助或建议这是我的代码：

import React from 'react';
import {FormattedMessage} from 'react-intl';
export default {
    items: [
        {
            name: <FormattedMessage id='app.dashboard'/>,
            url: '/dashboard',
            icon: 'icon-speedometer',
            badge: {
                variant: 'info',
                text: 'New',
            },
        },
        {
            title: true,
            name:  <FormattedMessage id='app.dashboard'/>,
            // optional wrapper object
            wrapper: {
                // required valid HTML5 element tag
                element: 'strong',
                // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
                attributes: {}, …

根据 React Intl 文档，要为您的应用程序添加对特定语言的支持，您需要从locale-data/目录中导入相关语言文件并将其传递给名为addLocaleData().

对于英语或法语等语言，一切都很简单，en.js并且fr.js遵循熟悉的两字母代码命名约定。但是，该locale-data目录还包含一系列我以前从未遇到过的带有三个字母语言代码的文件，例如：agq,guz或kkj.

我正在寻找一些文档来帮助我将这些语言代码映射到相应的语言。

我需要它的原因是我目前正在尝试查找奥地利德语和巴西葡萄牙语的语言文件，我只是不知道它们隐藏在什么代码后面。我认为前者可能在下可用，at.js但没有这样的文件，而后者 - 在下br.js但该文件包含一些其他语言。

我是新的反应,我正在阅读一些代码,我发现这行代码:

const {intl: { formatMessage }, } = this.context

是一个const声明,但我不明白我知道是JS ES6,但我不明白它是什么？我怎样才能检查这个const的值？

谢谢

我正在使用 React 制作一个多语言通用应用程序，但我很难找到处理区域设置数据的最佳方法。该应用程序将提供 16 种语言版本，并且翻译的消息量非常大，因此我无法将所有消息加载到一个大 json 中（因为它在大多数 React-intl 示例中使用），而且我也无法将这些消息导入 webpack 生成的包中，我只需要按需加载用户语言消息。当应用程序仅在客户端运行时我能够做到这一点，但我也需要它在服务器端运行。我使用express 进行服务器端渲染，使用webpack 进行捆绑。任何人都可以帮助找到处理这个问题的最佳方法吗？

我使用React-intl来实现UI Util Library的国际化.该库有一个文件夹,例如i18n,其中我为不同的语言环境放置json文件.如果该库的用户想要添加对其他语言环境的支持,他/她可以为相应的语言环境添加具有键/值对的附加json文件.

但是React-intl需要在之前的各个语言环境中导入和addLocaleData.例如,

import fr from 'react-intl/locale-data/fr';
addLocaleData([...fr]);

有没有办法添加LocalData并在React-intl中动态导入相应语言环境的语言环境库？

我正在使用"react-intl":"^ 2.4.0"和"react":"^ 16.2.0".

我试图将FormattedMessage标记的输出分配给常量并将其放在输入标记占位符中.

代码图片

预期输出输入字段,其中包含相应语言的文本,但它在文本框内出现[对象对象].