ホームページ > 記事 > ウェブフロントエンド > React-intl実装の多言語例を詳しく解説

React-intl実装の多言語例を詳しく解説

小云云オリジナル: 2017-12-28 10:39:022728ブラウズ

言語の国際化機能が最近プロジェクトに追加されました。この記事では主に React-intl で多言語を実装するためのサンプルコードを紹介します。編集者が非常に良いと思ったので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

言語の国際化 (言語のローカリゼーションと呼ぶ人もいます) は、実際には、Web アプリに複数の言語を追加することです。論理的に言えば、「逐語的な置き換え」ではありません。しかし、そのような低コストのアプローチで利益が得られるでしょうか?

最初に、プロジェクト全体に設定ファイルを追加する従来の方法を検討しましたが、異なる言語と地域に応じて、異なる設定ファイルをロードすることで、インターフェース言語の切り替えの目的を達成できます。もちろん、このアイデアが「初期」アイデアと呼ばれるのは、まさにこのアイデアが単純すぎるためです。言語の国際化とは、インターフェース上のUIテキストを別の言語に翻訳するだけでなく、日付と時刻の表示、数値表示（英語環境では3桁ごとにカンマ：1,000）、数量詞の表示（リンゴ）も含まれます。 . はリンゴ、2 つのリンゴはリンゴである必要があります)、文字列の途中に変数が挿入される場合もあります (「今日のランチに {count} 個のチキンドラムスティックを食べました」)...

これは単純な文字置換の問題ではなく、ディレクトリを簡単にエクスポートして Word またはページに配置し、他の同僚が翻訳作業のために比較できるようにする必要があります。これは非常に重要です。！プロダクトマネージャーにコードを直接変更してもらいたいですか?それとも一つずつ検索して置換しますか？よく考えずにただやるだけなら、その代償はあなたが払うことになると信じてください。

プログラマーを目指す人なら、index.html に 2934a685527f5cd6bcb20a3dc28499e1 の行を追加したくないでしょう?また、UI内のすべての文章は画像を使用した生徒に帰属します。立ち上がって退出してください。 React プロジェクトのどこかから何かをエレガントにインポートし、インターフェイス内のテキストを 0cffce67d2f17d9dbaff4b78ee2046fc コンポーネントに置き換え、最終的に簡単な設定で言語の国際化を実現したい場合は、React -intl を使用します。

React の国際化には、React-intl を使用することをお勧めします。このライブラリは、日付、数値、文字列などをフォーマットするための React コンポーネントと API を提供します。このライブラリについて理解したので、使用してみましょう

コンポーネントの使用法

React とさらに統合するには、コンポーネントを使用します

1. 参照を追加します

。

npm install react-intl --save

3. ロケール設定ファイルを追加します

zh-CN.js

import {IntlProvider, addLocaleData} from &#39;react-intl&#39;;

en-US.js

const zh_CN = { &#39;intl.hello&#39;: "你好", &#39;intl.name&#39;: &#39;我的名字是 {name}&#39; } export default zh_CN;

4. 1905fd125854d59ec1f7dec72e3298cfを使用します

i18n コンテキストを使用すると、アプリケーション全体が i18n のコンテキストで設定されるように、アプリケーションのルートコンポーネントがラップされます。 2 つの最も重要な設定項目は次のとおりです。現在のロケールメッセージと現在の言語のコンテンツを読み込みます。

言語を動的に切り替えたいので、これら 2 つの構成を動的に変更する必要があります。

const en_US = { &#39;intl.hello&#39;: "hello", &#39;intl.name&#39;: &#39;my name is {name}&#39; } export default en_US;

5. 12e09664183759a27c35bf8019a3976fを使用します

基本的な使い方

import zhCN from &#39;./locale/zh.js&#39;;  //导入 i18n 配置文件
import enUS from &#39;./locale/en.js&#39;;

addLocaleData([...en, ...zh]);

export default class Root extends Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { store , history } = this.props;
    return (
      <IntlProvider locale=&#39;zh&#39; messages={zhCN}>
        <Provider store={store}>
          <Router history={history}>
          </Router>
        </Provider>
      </IntlProvider>
    )
  }
}

現在のロケールが中国語の場合は、Hello と表示されます。英語環境の場合は、Hello と表示されます。 .

動的値の受け渡し

<FormattedMessage 
　　id="intl.hello"
　　defaultMessage={&#39;hello&#39;}
/>

intl.name を定義したとき、テンプレートで {name} を使用しました。これは、values 属性を通じて JSON オブジェクトを動的に渡すことができることを意味します。これは、FormattedMessage のコンテンツが動的に表示されます。

6. 他のコンポーネントの使用法

Ract-intl は、文字列、時刻、日付の処理に役立つ豊富なコンポーネントを提供します。何も理解できない場合は、このままにしておいても構いません。メッセージ。。

API の使用法

場合によっては、コード内で動的に国際化を行う必要があり、これには動的 API が必要です。使い方を簡単に紹介します

1. injectIntlをインポート

<FormattedMessage
  id="intl.name"
  values={{name: <b>{name}</b>}}
/>

2. コンポーネントにインジェクトします

import { injectIntl, FormattedMessage } from &#39;react-intl&#39;;

プロジェクトではReduxを使用しました。 Redux では、デフォルトの injectIntl(App) をエクスポートするだけです

3. intl オブジェクトを使用します

インジェクションの 2 番目のステップを通過したので、コンポーネントの props で intl オブジェクトを取得します。提供するメソッドは上で紹介したものと同じです。現時点では、文字列を表示したい場合は、formatMessage メソッドを使用できます。詳細については、API を確認してください

React-intl実装の多言語例を詳しく解説

関連記事