React国际化与React-Intl

如果您正在创建一个需要翻译成多种不同语言的 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> 元素以从我们的四种语言中进行选择。

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 上查看这篇文章的完整代码。