如果您正在创建一个需要翻译到多个不同语言的 Web 应用程序,则可能很难手动实现此功能,这就是为什么许多人使用国际化 (i18n) 库,这使得添加翻译就像添加另一个字符串一样简单。
React-Intl,是 FormatJS图书馆的一部分,是一个很好的图书馆,可以做到这一点。
安装
要开始,我们将使用 Create React App创建一个新项目,并添加react-intl包。
1$ yarn create react-app i18n
2$ cd i18n
3$ yarn add react-intl
添加翻译
首先,我们将打开src/App.js并添加一个包含我们将使用的短语及其翻译的对象:
1[label src/App.js]
2import React from "react";
3
4const messages = {
5 en: {
6 greeting: "Hello {name}! How are you?",
7 time: "The time is {t, time, short}.",
8 date: "The date is {d, date}."
9 },
10 es: {
11 greeting: "¡Hola {name}! ¿Cómo estás?",
12 time: "La hora es {t, time, short}.",
13 date: "La fecha es {d, date}."
14 },
15 fr: {
16 greeting: "Bonjour {name}! Comment ça va?",
17 time: "Il est {t, time, short}.",
18 date: "La date est {d, date}."
19 },
20 de: {
21 greeting: "Hallo {name}! Wie geht's?",
22 time: "Es ist {t, time, short} Uhr.",
23 date: "Das Datum ist {d, date}."
24 }
25};
嵌入曲线框中的参数({和 })允许您输入数据并定义将如何格式化数据。
写我们的组件
现在我们已经写了我们的翻译,我们必须在我们的应用组件中使用它们。
1[label src/App.js]
2import React, { useState } from "react";
3import { IntlProvider, FormattedMessage } from "react-intl";
4
5const messages = {
6 // -- snip --
7};
8
9function App() {
10 const [name, setName] = useState("");
11
12 const handleChange = e => {
13 setName(e.target.value);
14 };
15
16 const locale = "en";
17
18 return (
19 <>
20 <input placeholder="Enter name" onChange={handleChange} />
21
22 <IntlProvider locale={locale} messages={messages[locale]}>
23 <p>
24 <FormattedMessage id="greeting" values={{ name }} />
25 <br />
26 <FormattedMessage id="time" values={{ t: Date.now() }} />
27 <br />
28 <FormattedMessage id="date" values={{ d: Date.now() }} />
29 </p>
30 </IntlProvider>
31 </>
32 );
33}
34
35export default App;
很棒! 我们所做的就是添加一个<IntlProvider>,传入本地和使用的消息,并使用<FormattedMessage>来渲染我们的文本。不幸的是,我们看到的唯一东西是英语! 这是因为我们需要某种方式来改变本地。 这很简单,只需将本地值添加到组件的状态,并添加一个<选择>元素来从我们的四种语言中选择。
1[label src/App.js]
2// -- snip --
3
4function App() {
5 const [name, setName] = useState("");
6
7 const handleChange = e => {
8 setName(e.target.value);
9 };
10
11 const [locale, setLocale] = useState("en");
12
13 const handleSelect = e => {
14 setLocale(e.target.value);
15 };
16
17 return (
18 <>
19 <input placeholder="Enter name" onChange={handleChange} />
20 <select onChange={handleSelect} defaultValue={locale}>
21 {["en", "es", "fr", "de"].map(l => (
22 <option key={l}>{l}</option>
23 ))}
24 </select>
25
26 <IntlProvider locale={locale} messages={messages[locale]}>
27 <p>
28 <FormattedMessage id="greeting" values={{ name }} />
29 <br />
30 <FormattedMessage id="time" values={{ t: Date.now() }} />
31 <br />
32 <FormattedMessage id="date" values={{ d: Date.now() }} />
33 </p>
34 </IntlProvider>
35 </>
36 );
37}
38
39export default App;
这就是它!
包装上
这是一个非常强大的库,我强烈建议你检查(他们的文档)(LINK0)。
您可以在 CodeSandbox上查看这篇文章的完整代码。