反应 Intl FormattedNumber 与货币符号之前，而不是之后答案

【问题标题】：React Intl FormattedNumber with the currency symbol before, not after反应 Intl FormattedNumber 与货币符号之前，而不是之后
【发布时间】：2016-11-16 14:07:12
【问题描述】：

我在一个大型 React 项目中使用来自 React Intl 的 FormattedNumber，该项目具有多种不同语言的功能。

这是我制作的货币组件，以便我可以轻松地将格式化的货币插入到我的视图中：

import {FormattedNumber} from 'react-intl';

const Currency = (props) => {

    const currency = props.currency;
    const minimum = props.minimumFractionDigits || 2;
    const maximum = props.maximumFractionDigits || 2;
    return <FormattedNumber
                    value={props.amount}
                    style="currency"
                    currency={currency}
                    minimumFractionDigits={minimum}
                    maximumFractionDigits={maximum}
    />;
};

export default Currency;

该组件运行良好。而且，它按预期工作。在英语中 - 当 currency 为 GBP 时 - 金额的格式如下：

£4.00

在德语中 - 当 currency 为 EUR 时 - 它的格式如下：

4,00€

但是，在特定情况下，我需要以不同的方式格式化金额。所以，我正在寻找的是在金额之前出现的欧元，如下所示：

€4,00

FormattedNumber 可以做到这一点吗？如果可以避免的话，我不想手动重新格式化格式化的数字。

【问题讨论】：

看起来有一个类似的未解决问题：github.com/yahoo/react-intl/issues/534。根据他们目前的docs，这是无法调整的。无赖。
谢谢，如何在货币显示中删除小数的示例帮助了我。

标签： reactjs internationalization

【解决方案1】：

您可以使用适当的 locale 属性将 FormattedNumber 包装在 IntlProvider 组件中，如下所示：

<IntlProvider locale='en'>
  <FormattedNumber
    value={props.amount}
    style="currency"
    currency={props.currency} />
</IntlProvider>

也许“en”文件仍然不正确，因为它将使用句点而不是逗号，但您可以查找提供正确格式的语言环境 (see here) 或自己编写一个（通过复制 en 语言环境并将句点替换为相应行中的逗号来保持简单）。

【讨论】：

【解决方案2】：

您可以通过 <IntlProvider> 上的 formats 属性指定自定义的命名格式。还有defaultFormats 与defaultLocale 在备用情况下一起使用，因为formats 可能依赖于locale。这是一个使用自定义命名数字格式USD 的<FormattedMessage> 和<FormattedNumber> 示例：

const formats = {
    number: {
        TRY: {
            style: 'currency',
            currency: 'TRY'
        },
        USD: {
            style: 'currency',
            currency: 'USD'
        }
    }
};

<IntlProvider locale='en' messages={{
        price: 'This product costs {price, number, USD}'
    }}
    formats={formats}
    defaultFormats={formats}
>
    <FormattedMessage id={'price'} values={{price: 1000}}/>
    <FormattedNumber value={1000} format='USD'/>
</IntlProvider>

【讨论】：