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