标签: react-intl

关于这种用法,react-intl我在文档中找不到任何内容(我正在使用v2分支),因此这个问题.以下用例是否有推荐的方法？

说我有两个组件,Tooltip和Select.两者都需要相同的i18n格式字符串,例如:

<FormattedMessage
    id='ui.widget.cycleOffsetSelector.timeCycle.label'
    defaultMessage="This {cycle}"
    values={{cycle: props.cycle}}
/>

如何在其他组件中使用相同的消息？只是用这个:

<FormattedMessage
    id='ui.widget.cycleOffsetSelector.timeCycle.label'
    values={{cycle: props.cycle}}
/>

不起作用(不应该:)).那么,这样做的正确方法是什么？我是否必须在我的应用程序中全局保存这些共享消息？因为维护与代码分开的"共享"intl消息列表会变得很麻烦,所以react-intl声称要解决的问题.

当前，在使用时babel-plugin-react-intl，将使用'id'，'description'和'defaultMessage'为每个组件创建单独的json。我需要的是仅创建一个json，其中包含一个对象，其中所有“ id”作为“键”，所有“ defaultMessage”作为“值”

现状：

ComponentA.json

[
  {
    "id": "addEmoticonA",
    "description": "Add emoticon",
    "defaultMessage": "Insert Emoticon"
  },
  {
    "id": "addPhotoA",
    "description": "Add photo",
    "defaultMessage": "Insert photo"
  }
]

ComponentB.json

[
  {
    "id": "addEmoticonB",
    "description": "Add emoji",
    "defaultMessage": "Insert Emoji"
  },
  {
    "id": "addPhotoB",
    "description": "Add picture",
    "defaultMessage": "Insert picture"
  }
]

我需要翻译什么。

final.json

{
  "addEmoticonA": "Insert Emoticon",
  "addPhotoA": "Insert photo",
  "addEmoticonB": "Insert Emoji",
  "addPhotoB": "Insert picture"
}

有什么办法可以完成这项任务？可能是通过使用python脚本或其他任何方式。即从不同的json文件制作一个json文件。或者使用babel-plugin-react-intl直接制作一个json文件

对不起,如果有人问我但找不到任何东西......

Chrome,Firefox等中的以下代码将返回"US $"的货币符号:

new Intl.NumberFormat('en-CA', {
    style: 'currency',
    currencyDisplay: 'symbol',
    currency: 'USD'
}).format(65421.45)

如果货币设置为'CAD',它将只使用'$':

new Intl.NumberFormat('en-CA', {
    style: 'currency',
    currencyDisplay: 'symbol',
    currency: 'CAD'
}).format(65421.45)

但是在我测试的IE和Edge的所有版本中,这两个示例都将返回货币符号'$'.无论使用何种地区或货币,它都不会返还US $或CA $.(同样适用于澳元,港币等)

示例:https://jsfiddle.net/5wfzk7mf/

当我使用react-intl的formatNumber()函数时也会发生这种情况,因为它正在使用Intl.NumberFormat.

我错过了什么或这是一个浏览器错误？

我用react-intl用en和fr，和我的应用程序做出反应被包裹在

<IntlProvider locale={lang}>

这样，例如 when langis en，所有intl.formatMessage调用都会产生英文文本。

我想要实现的是我想要的<IntlProvider locale="en">，但是在应用程序内部，我需要将特定的一个intl.formatMessage翻译成fr.

我有一个navigation标准项目，例如：联系方式，服务，价格等...我将其呈现为：

const menuItemList = menuItems.map((item, index) => {
    return (
        <li key={index}>
            <NavLink to={item.url}>{item.title}</NavLink>
        </li>
    );
});

工作正常。但是现在我需要翻译此导航，并react-intl为此使用库。因此，对于react-intl 文档，我必须这样使用FormattedMessage：

<p>
   <FormattedMessage id="mainText"/>
</p> 

有用。但是如何将其用于列表呈现？我认为这可以解决此问题，但事实并非如此。

const menuItemsList = menuItems.map((item, index) => {
    return (
        <li key={index}>
            <NavLink to={item.url}>
                <FormattedMessage id="mainText" values={item.title}/>
            </NavLink>
        </li>
    );
});

伙计们，请帮忙。如何React使用FormattedMessagefrom中的项目渲染列表react-intl？

我有一个 react-intl 包问题。我正在使用 injectIntl​​ 方式在组件中使用道具。纯字符串很好，但如果我包装了 HTML 标签，它将不起作用。

纯弦成功案例

const _tableNoText = intl.formatMessage(
    { id: 'footer.table_no' },
    { value: basket.table }
);
//console -> Table 1

带有 HTML 标签失败案例的纯字符串

const _tableNoText = intl.formatMessage(
    { id: 'footer.table_no' },
    { value: <b>basket.table</b> }
);
// console -> Table [object object]

如果我更改formatMessage为formatHTMLMessage，它将输出与上述相同的结果，我该如何解决？

非常感谢大家。

我正在将 React Intl 用于 x 种语言（如下所示），目前我在设置应用程序的位置导入以下内容：

import { addLocaleData } from 'react-intl';
import locale_en from 'react-intl/locale-data/en';
import locale_de from 'react-intl/locale-data/de';

import messages_en from './translations/en.json';
import messages_de from './translations/de.json';

addLocaleData([...locale_en, ...locale_de]);

...
export const messages = {
    en: messages_en,
    de: messages_de
}

由于无论使用哪种语言，这些语言文件都会被导入，我的主捆绑 js 文件变得相当大，尤其是 .json 文件。

如何使用 Webpack 拆分这些语言文件（或使用 CopyWebpackPlugin 将它们复制到我的 dist 文件夹中），然后根据当前使用的语言动态导入它们？

该应用程序是同构的，因此相同的代码正在服务器上运行。

鉴于react-localization它没有日期和数字格式，并且严重依赖于我们决定切换到的一位开发人员，react-intl因为从长远来看它似乎更安全。

https://github.com/stefalda/react-localization/graphs/contributors

我们之前的代码是这样的：

本地化服务.ts

import LocalizedStrings from 'react-localization';

import svSE from './languages/sv-SE';
import enUS from './languages/en-US';
import arSA from './languages/ar-SA';

export default new LocalizedStrings({
    svSE,
    enUS,
    arSA
});

ILanguageStrings.ts

export interface ILanguageStrings {
    appName: string
    narration: string
    language: string
}

en-US.ts

import { ILanguageStrings } from '../ILanguageStrings';

const language: ILanguageStrings = {
    appName: "Our App",
    narration: "Narration",
    language: "Language"
}

export default language;

然后可以导入本地化并ILanguageStrings通过 Visual Studio 中的 IntelliSense 可见并通过 TypeScript 进行验证。

import localization from …

如何渲染嵌套元素react-intl

我正在尝试渲染什么：

<FormattedMessage>
    This is a <strong>House</strong>
</FormattedMessage>

这已经在这里讨论过，文档中应该有示例，但我找不到它们。

我正在将一个项目从next.js 7迁移到 10。它使用react-intl进行翻译，并且是用 TypeScript 编写的。

在以前的版本我有一个自定义的server.js和处理子路由多语言的目的（/日，/ FR等），在它。在自定义应用程序组件中，通过 getInitialProps，我从req获取语言环境并将其作为道具传递给我的组件。所以整个画面是这样的： 自定义应用程序：

static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    const { req } = ctx;
    const { locale, messages } = req || (window as any).__NEXT_DATA__.props;
    const initialNow = Date.now();

    if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps, locale, messages, initialNow }
}

render() {
        const { Component, pageProps, locale, messages, initialNow …