React-IntlとのReactの国際化
複数の異なる言語への翻訳が必要なWebアプリケーションを作成している場合、これを手動で実装するのは難しい場合があります。 そのため、多くの場合、国際化(i18n)ライブラリが使用されます。これにより、別の文字列を追加するのと同じくらい簡単に翻訳を追加できます。
React-Intl は、 FormatJS ライブラリセットの一部であり、まさにそれを行うための優れたライブラリです。 Yahooの人々によって書かれ、文字列の翻訳、日付、数値のフォーマットなどを可能にするいくつかのReactコンポーネントを提供します。
インストール
まず、 Create React App を使用して新しいプロジェクトを作成し、react-intl
パッケージを追加します。
$ yarn create react-app i18n $ cd i18n $ yarn add react-intl
翻訳の追加
まず、src/App.js
を開き、使用するフレーズとその翻訳を含むオブジェクトを追加します。
src / App.js
import React from "react"; const messages = { en: { greeting: "Hello {name}! How are you?", time: "The time is {t, time, short}.", date: "The date is {d, date}." }, es: { greeting: "¡Hola {name}! ¿Cómo estás?", time: "La hora es {t, time, short}.", date: "La fecha es {d, date}." }, fr: { greeting: "Bonjour {name}! Comment ça va?", time: "Il est {t, time, short}.", date: "La date est {d, date}." }, de: { greeting: "Hallo {name}! Wie geht's?", time: "Es ist {t, time, short} Uhr.", date: "Das Datum ist {d, date}." } };
中括弧({
および}
)で囲まれた引数を使用すると、データを入力し、データのフォーマット方法を定義できます。 詳細については、メッセージ構文のドキュメントを参照してください。
コンポーネントの作成
翻訳を作成したので、App
コンポーネントでそれらを使用する必要があります。
src / App.js
import React, { useState } from "react"; import { IntlProvider, FormattedMessage } from "react-intl"; const messages = { // -- snip -- }; function App() { const [name, setName] = useState(""); const handleChange = e => { setName(e.target.value); }; const locale = "en"; return ( <> <input placeholder="Enter name" onChange={handleChange} /> <IntlProvider locale={locale} messages={messages[locale]}> <p> <FormattedMessage id="greeting" values={{ name }} /> <br /> <FormattedMessage id="time" values={{ t: Date.now() }} /> <br /> <FormattedMessage id="date" values={{ d: Date.now() }} /> </p> </IntlProvider> </> ); } export default App;
素晴らしい! <IntlProvider>
を追加し、使用するロケールとメッセージを渡し、<FormattedMessage>
を使用してテキストをレンダリングしました。 残念ながら、私たちが目にしているのは英語だけです! これは、ロケールを変更する方法が必要なためです。 これは非常に簡単です。コンポーネントの状態にlocale
値を追加し、<select>
要素を追加して4つの言語から選択するだけです。
src / App.js
// -- snip -- function App() { const [name, setName] = useState(""); const handleChange = e => { setName(e.target.value); }; const [locale, setLocale] = useState("en"); const handleSelect = e => { setLocale(e.target.value); }; return ( <> <input placeholder="Enter name" onChange={handleChange} /> <select onChange={handleSelect} defaultValue={locale}> {["en", "es", "fr", "de"].map(l => ( <option key={l}>{l}</option> ))} </select> <IntlProvider locale={locale} messages={messages[locale]}> <p> <FormattedMessage id="greeting" values={{ name }} /> <br /> <FormattedMessage id="time" values={{ t: Date.now() }} /> <br /> <FormattedMessage id="date" values={{ d: Date.now() }} /> </p> </IntlProvider> </> ); } export default App;
それでおしまい!
まとめ
これは、react-intl
の使い方の簡単な例です。 これは非常に強力なライブラリであり、それらのドキュメントを確認することを強くお勧めします。
この投稿の完全なコードは、CodeSandboxで確認できます。