reactjs - 在 Intl FormattedNumber 之前而不是之后使用货币符号来 react Intl FormattedNumber

Question

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

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

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

您可以使用具有适当 locale 属性的 IntlProvider 组件来包装您的 FormattedNumber，如下所示:

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

也许“en”文件仍然不正确，因为它将使用句点而不是逗号，但您可以查找提供正确格式的区域设置( see here )，或者自己编写一个(为了简单起见，复制 en locale 并将句点替换为相应行中的逗号)。