JavaScript >> Javascript チュートリアル >  >> React

react-intl で国際化に対応する

React の国際化に苦労していますか?どのライブラリを選択すればよいかわかりませんか?さまざまな書式設定オプションをサポートする必要がありますか?プロジェクトに最適なソリューションを選択する必要がある場合、多くの疑問が生じます。この投稿では、最も人気のあるライブラリの 1 つである react-intl を使用して、React アプリで国際化を設定する方法を説明します。 .

react-intl 国際化と書式設定のための JavaScript ライブラリのセットである Format.JS の一部です。これは、十分に文書化され、維持されているライブラリです。すべての主要なブラウザで問題なく動作します。古いブラウザには、ポリフィルがあります。豊富なフォーマット オプションと ICU メッセージ構文のサポートにより、非常に便利です。

始めましょう。

新しい React プロジェクトを作成する

まず最初に、Create React App で新しい React アプリを作成しましょう。

npx create-react-app react-intl-example

React Intl 依存関係を追加

react-intl を使用するには ライブラリをプロジェクトに追加するには、それを依存関係として追加する必要があります。

cd react-intl-example
npm i --save react-intl

ローカリゼーション ファイルの作成

次のステップは、必要なロケールのローカリゼーション ファイルを作成することです。すべてのローカリゼーション ファイルを 1 か所に保管することをお勧めします (例:src/lang )。この例では、lang の下に 3 つの JSON ファイルを追加します。 ディレクトリ:ar.jsonen.json 、および es-MX.json .これらのファイルには、アラビア語、英語、スペイン語 (メキシコ) の翻訳が含まれます。

以下に、前述のファイルを追加した後のプロジェクト構造がどのようになるかを示します。

react-intl-example
|-- lang
|   |-- ar.json
|   |-- en.json
|   |-- es-MX.json
|-- src
|   |-- App.js
|   |-- App.test.js
|   |-- index.js
|   |-- ...
|-- ...
|-- package.json
|-- package-lock.json

後でローカリゼーション メッセージを使用するので、追加されたファイルにいくつかのコンテンツを入力しましょう。

ar.json :

{
  "message.simple": "رسالة بسيطة."
}

en.json :

{
  "message.simple": "A simple message."
}

es-MX.json :

{
  "message.simple": "Un mensaje sencillo."
}

アプリを IntlProvider でラップする

最後に、最上位のアプリ コンポーネントを IntlProvider でラップします。 react-intl から ライブラリを開き、適切なメッセージを渡します (LocalizationWrapper を確認してください コンポーネント)

App.js :

import React, { useState, useEffect } from "react";
import { useIntl, IntlProvider, FormattedMessage } from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) {
  switch (locale) {
    case "ar":
      return import("./lang/ar.json");
    case "en":
      return import("./lang/en.json");
    case "es-MX":
      return import("./lang/es-MX.json");
    default:
      return import("./lang/en.json");
  }
}

function getDirection(locale) {
  switch (locale) {
    case "ar":
      return "rtl";
    case "en":
      return "ltr";
    case "es-MX":
      return "ltr";
    default:
      return "ltr";
  }
}

function LocalizationWrapper() {
  const [locale, setLocale] = useState(initLocale);
  const [messages, setMessages] = useState(null);
  useEffect(() => loadMessages(locale).then(setMessages), [locale]);

  return messages ? (
    <IntlProvider locale={locale} messages={messages}>
      <App locale={locale} direction={getDirection(locale)} onLocaleChange={(locale) => setLocale(locale)} />
    </IntlProvider>
  ) : null;
}
export default LocalizationWrapper;

function App({ locale, direction, onLocaleChange }) {
  const intl = useIntl();

  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <select value={locale} onChange={(e) => onLocaleChange(e.target.value)}>
          <option value="en">en</option>
          <option value="es-MX">es-MX</option>
          <option value="ar">ar</option>
        </select>
      </div>

      <div dir={direction}>
        <h3>Declarative examples</h3>
        <FormattedMessage id="message.simple" />

        <h3>Imperative examples</h3>
        {intl.formatMessage({ id: "message.simple" })}
      </div>
    </div>
  );
}

おめでとうございます。React アプリで国際化が正常に設定されました!

詳細と例については、元の投稿をご覧ください。

すべてのコード サンプルは GitHub リポジトリで入手できます。

お役に立てば幸いです。


  1. サーバーレス クラウド製品の比較

  2. テスト駆動開発チュートリアル – JavaScript および ReactJS アプリケーションをテストする方法

  3. 迅速な認証のためのおそらく奇妙なアプローチ - ユーザーレジストリ API と Passport