Question

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

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

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可以实现吗？如果可以避免，我不想手动重新格式化格式化的数字。

Answer 1

您可以使用FormattedNumber组件将IntlProvider与适当的区域设置包装在一起，如下所示：

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

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

Answer 2

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

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>

使用货币符号来反映Intl FormattedNumber，而不是之后

2 个答案: