react-intl多言語で<br>コンポーネントの使用方法

1053 ワード

プロジェクトの必要性のため、現在のユーザーが選択している言語に基づいて、異なる言語ファイルをロードして国際化する必要があります.
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であることに注意!!!