react-intl多言語で<br>コンポーネントの使用方法
1053 ワード
プロジェクトの必要性のため、現在のユーザーが選択している言語に基づいて、異なる言語ファイルをロードして国際化する必要があります.
react-intlのコンポーネントの使い方について:まず、翻訳が必要な国の言語のjsまたはjsonファイルを作成します.たとえば、次のようにします.
en_CN.json:
zh_CN.json:
次に、翻訳が必要なコンポーネントに導入します.
基本的な使用方法:id属性の値をインデックスとします.カスタムマッピングテーブルにインデックスします.
defaultMessageがidに対応する属性値である場合、デフォルトで表示される文が見つかりません.
ダイナミック値:
i 18 nを定義する.nameのテンプレートには{name}が使われており、動的に値を伝えることができることを表しています.これにより、中のvalues属性からJSONオブジェクトを伝えることで、私たちの内容を動的に表示することができます.ここではvalueではなくvaluesであることに注意!!!
react-intlのコンポーネントの使い方について:まず、翻訳が必要な国の言語のjsまたはjsonファイルを作成します.たとえば、次のようにします.
en_CN.json:
{
"i18n.hello": "Hello, this is i18n",
"i18n.name": "my name is {name}"
}
zh_CN.json:
{
"i18n.hello": " , i18n",
"i18n.name": " {name}"
}
次に、翻訳が必要なコンポーネントに導入します.
import {FormattedMessage} from 'react-intl';
基本的な使用方法:id属性の値をインデックスとします.カスタムマッピングテーブルにインデックスします.
defaultMessageがidに対応する属性値である場合、デフォルトで表示される文が見つかりません.
ダイナミック値:
{name}}} />
i 18 nを定義する.nameのテンプレートには{name}が使われており、動的に値を伝えることができることを表しています.これにより、中のvalues属性からJSONオブジェクトを伝えることで、私たちの内容を動的に表示することができます.ここではvalueではなくvaluesであることに注意!!!