web-dev-qa-db-ja.com

React通貨記号が後ではなく前にあるIntl FormattedNumber

私は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で可能ですか？回避できる場合は、フォーマットされた数値を手動で再フォーマットする必要はありません。

reactjsinternationalization
11
alanbuchanan

次のように、FormattedNumberをIntlProviderコンポーネントで適切なロケールプロップでラップすることができます。

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

おそらく 'en'ファイルはまだ適切ではないかもしれません。カンマの代わりにピリオドを使用するためですが、正しい形式を提供するロケール（ ここを参照 ）を探すか、単に自分で記述します（enロケールをコピーし、それぞれの行のピリオドをコンマで置き換えることで簡単に保つため）。

10
Maxim Zubarev

<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>
2
Orhan