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

Question

我在React Intl中使用了FormattedNumber,它是一个具有许多不同语言功能的大型React项目.

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

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'文件仍然不正确,因为它会使用句点而不是逗号,但你可以找一个提供正确格式的语言环境(见这里)或者自己写一个(保持简单)通过复制en语言环境并用相应行中的逗号替换句点).

Answer 2

formats您可以通过上的 prop指定自定义的命名格式<IntlProvider>。还有在后备情况下defaultFormats与 一起使用的，因为可能依赖于。以下是使用自定义命名数字格式的示例：defaultLocaleformatslocale<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>