博客

react-intl 使用

If you’re creating a web application that requires translation into multiple different languages, it can be difficult to implement this manually. That’s why many use internationalization (i18n) libraries, which make adding translations as simple as adding another string.

如果创建的Web应用程序需要翻译成多种不同的语言，则可能很难手动实现。 这就是为什么许多人使用国际化(i18n)库的原因，该库使添加翻译就像添加另一个字符串一样简单。

React-Intl

, part of the

FormatJS

set of libraries, is a nice library for doing just that. Written by the folks over at Yahoo, it provides several React components that allow for translating strings, formatting dates, numbers, and more.

React-Intl

是

FormatJS

库集的一部分，是一个很好的库。 它是由Yahoo的人们编写的，提供了几个React组件，这些组件可以翻译字符串，格式化日期，数字等。

安装

(

Installation

)

To start us off, we’ll create a new project using

Create React App

and add the

react-intl

package.

首先，我们将使用

Create React App

创建一个新项目，并添加

react-intl

包。

$ yarn create react-app i18n
$ cd i18n
$ yarn add react-intl

添加翻译

(

Adding Translations

)

First, we’ll open up

src/App.js

and add an object containing the phrases we’ll use and their translations:

首先，我们将打开

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}."
  }
};

The arguments enclosed in curly braces (

{


and

}

) allow you to input data and define how it will be formatted. For more information, see the documentation on

message syntax

.

用大括号(

{


和

}

)括起来的参数允许您输入数据并定义其格式。 有关更多信息，请参见有关

消息语法

的文档。

编写我们的组件

(

Writing our Component

)

Now that we have our translations written, we have to use them in our

App

component.

现在我们已经编写了翻译，我们必须在我们的

App

组件中使用它们。

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;

Great! What we’ve done is add an

<IntlProvider>

, passed-in the locale and messages to use, and used

<FormattedMessage>

to render our text. Unfortunately, the only thing we’re seeing is English! This is because we need some way to change the locale. This is pretty simple, just add the

locale

value to the component’s state and add a

<select>

element to pick from our four languages.

大！ 我们要做的是添加一个

<IntlProvider>

，传入的语言环境和要使用的消息，并使用

<FormattedMessage>

呈现文本。 不幸的是，我们唯一看到的是英语！ 这是因为我们需要某种方式来更改语言环境。 这非常简单，只需将

locale

值添加到组件的状态并添加

<select>

元素以从我们的四种语言中进行选择即可。

// -- 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;

That’s it!

而已！

结语

(

Wrapping Up

)

That was just a simple example of how to use

react-intl

. It’s a very powerful library, and I definitely recommend checking out

their documentation

.

那只是如何使用

react-intl

的简单示例。 这是一个非常强大的库，我绝对建议您查阅

他们的文档

。

You can check out the complete code for this post on

CodeSandbox

.

您可以在

CodeSandbox

上查看此帖子的完整代码。

翻译自:

https://www.digitalocean.com/community/tutorials/react-i18n-react-intl

react-intl 使用