ホームページ > 記事 > バックエンド開発 > 多言語の React-intl 実装を説明する例

多言語の React-intl 実装を説明する例

小云云オリジナル: 2017-12-12 09:21:032067ブラウズ

この記事では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 つです。現在のロケールメッセージを読み込む現在のロケールメッセージの内容。言語。

言語を動的に切り替えたいので、これら 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を使用します

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

動的値転送

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>
    )
  }
}

intl.name を定義したとき、テンプレート内で {name} を使用しました。これは、JSON オブジェクトを介して値を動的に転送できることを意味します。これにより、コンテンツが動的に表示されます。

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

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

API の使用法

場合によっては、コード内で動的に国際化を行う必要があり、これには動的 API が必要です。

の使い方を簡単に紹介します 1. injectIntl

をインポートします 2. コンポーネントに

を注入する場合は上記のようになります。 Redux を使用しない場合は、デフォルトの injectIntl(App) をエクスポートするだけです

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

インジェクションの 2 番目のステップを通過したので、コンポーネントの props で intl オブジェクトを取得します。提供するメソッドは私たちのものと同じです。上で紹介したコンポーネントは基本的に互いに対応しています。この時点で、文字列を表示したい場合は、formatMessage メソッドを使用できます:

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

詳細については、API を参照してください

多言語の React-intl 実装を説明する例

関連記事